Use for short, fixed option lists.
Select
Styled native select for compact, accessible option picking.
Pick the team that owns this task.
- .source-select-root Root wrapper
- .source-select-wrapper Border and focus ring container
- .source-select Native select element
- .source-select-chevron Decorative dropdown icon
- .source-select-hint Hint or error area
States
StateAppearance
DefaultNative control with custom border and centered icon.
FocusWrapper focus ring in accent color.
ErrorDanger border and message style.
DisabledMuted and non-interactive control.
Design intent
Select is a compact dropdown for choosing one value from a known, fixed list. It delegates the picker to the browser, which means native keyboard support and accessibility at no extra cost. The trade-off is limited control over option layout and no search. For 50+ options or options with images, a custom combobox is the right tool.
When to use
Do
Keep option labels clear and mutually exclusive.
Use when users need to pick exactly one value.
Don't
Use for long lists that need search. Use Combobox instead.
Use when users can select multiple options.
Use placeholder text as the only label.
Placeholder option
Use required to make first selection mandatory. With a placeholder, the empty option is blocked only when required is true.
Designer checklist
- Placeholder text clarifies expected input, not just 'Select an option'.
- Required field blocking is communicated before the user attempts to submit.
- Error state includes a descriptive message below the field.
- Option labels are short enough to read in a list without truncating.
Select props
PropTypeDefaultDescription
childrenReactNoderequiredOption and optgroup nodes.
placeholderstringnullFirst option with empty value.
requiredbooleanfalseShows
* after label and prevents empty option selection.sizesm | md | lgmdControl size.
errorstringnullError text and danger state.
Basic usage
import { Select } from '@pierredelattre/source-react';
<Select id="role" label="Role" placeholder="Choose a role">
<option value="admin">Admin</option>
<option value="editor">Editor</option>
<option value="viewer">Viewer</option>
</Select>With validation
<Select
id="country"
label="Country"
error={errors.country}
required
>
{countryOptions}
</Select>Component tokens
TokenDefault
--source-select-border-color--source-color-border-strong
--source-select-height2.25rem
--source-select-icon-color--source-color-text-label
ARIA attributes
AttributePurpose
aria-invalidSet when the field has an error.
aria-describedbyConnects select with hint or error copy.
Keyboard support
KeyBehavior
TabMoves focus to the control.
Arrow keysNavigate options in native picker.