Select
Last Updated: September 2026Selection inputs are information capture fields that let users select from a pre-defined list of options.
Source CodeAnatomy
link- 1Trigger
- 2Icon
- 3Items
- 4Popup
Variants
linkPlaceholder
No value selected — shows placeholder text.
Default value
Uncontrolled selection via defaultValue.
Disabled
disabled prevents opening and changing the value.
Disabled items
Mark individual options with disabled: true.
Leading content
Optional leading node per item (icon or flag).
Usage Guidelines
linkWhen to use
- •To choose one option from a predefined list.
- •When options are short enough to scan in a dropdown.
- •As a form control beside Input and Button.
When not to use
- •For free-text entry — use Input.
- •For phone country + number — use PhoneInput.
- •For actions rather than selection — use Menu or Button.
Use concise, mutually exclusive labels users can scan quickly.
Don't put full sentences or multi-line content in option labels.
Compose Select with Input and Button for short forms.
Don't use Select for open-ended values like phone numbers — use PhoneInput.
Behaviors
linkValue model
- •Uncontrolled: defaultValue.
- •Controlled: value + onValueChange(string).
- •items is required — each item needs a unique value and a label.
Custom trigger
- •triggerContent replaces the default Value + chevron (used by PhoneInput).
- •triggerClassName merges onto the trigger for embedded layouts.
Popup
- •List is portaled and positioned under the trigger.
- •Highlighted items use keyboard and pointer focus; disabled items are skipped.
Content Guidelines
linkLabels
- •Keep option labels short and parallel in structure.
- •Placeholder should describe the choice ('Appointment type'), not 'Select an option' alone when context is clear.
Values
- •Use stable string values (ids/slugs), not display labels.
- •Avoid PII in option values or labels in demos — synthetic data only.
Accessibility
linkText & Labels
- •Pair with a visible Field.Label in forms.
- •Placeholder is not a permanent accessible name.
ARIA attributes
- •Built on Base UI Select — trigger exposes listbox semantics when open.
- •Disabled options are not selectable.
Keyboard Support
- •Tab → focus the trigger.
- •Enter / Space → open.
- •Arrow keys → move highlight; Enter → select.
- •Escape → close.
WCAG Compliance Standards
FAQs
linkIs Select a compound component?
No. Pass items=[{ value, label, leading?, disabled? }]. There is no Select.Item export — PhoneInput customizes via triggerContent / triggerClassName.
Controlled vs uncontrolled?
Use value + onValueChange for controlled; defaultValue when you don't need to own state.
Select vs Input?
Select for fixed options; Input for free text. PhoneInput combines Select (country) with Input (number).