Select
A custom, fully-styled single-select dropdown, not a native <select>.
Built as a real listbox rather than wrapping the native element, since a native dropdown renders an OS-level popup that can't be styled to match the design.
Select a country
Error state
Select an option
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { label: string; value: string; disabled?: boolean }[] | The list of selectable options. | |
| label | string | Field label. | |
| description | string | Help text under the field. | |
| error | string | Sets the error state and shows this message. | |
| size | 'sm' | 'md' | 'lg' | 'md' | Field height. |
| value | string | Controlled selected value. | |
| defaultValue | string | Uncontrolled initial value. | |
| onChange | (value: string) => void | Fires with the new value on selection. | |
| disabled | boolean | false | Disables the field. |
Why it works this way
Why
- It is a custom listbox, not a native <select>: the native one opens an operating-system dropdown that can't be styled, so the open state never matched the design.
- It is fully keyboard operable: Enter or Space opens, arrows move, Home and End jump, Escape closes.
Don't
- Don't use it for long or searchable lists. Use Combobox.
- Don't use it for two or three options. Radio or SegmentedControl is faster.