Select
Accessible dropdown selector. Supports groups, disabled options, and custom triggers.
Install
Import path
Examples
Align Item With Trigger
Use the position prop on SelectContent to control alignment. When position='item-aligned' (default), the popup positions so the selected item appears over the trigger. When position='popper', the popup aligns to the trigger edge.
Toggle to align the item with the trigger.
Disabled
Displays a list of options for the user to pick from—triggered by a button.
Groups
Use SelectGroup, SelectLabel, and SelectSeparator to organize items.
Invalid
<FieldLabel>Fruit</FieldLabel> <SelectTrigger aria-invalid> <SelectValue /> </SelectTrigger>
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Scrollable
A select with many items that scrolls.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Select, SelectTrigger, SelectValue,
SelectContent, SelectGroup, SelectLabel, SelectItem,
} from "@codefast/ui/select";
<Select value={v} onValueChange={setV}>
<SelectTrigger>
<SelectValue placeholder="Choose…" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Group</SelectLabel>
<SelectItem value="a">A</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
API reference
Props for each part of the component. All native element props are also forwarded.
Select
Root. Owns the selected value.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | string / (value: string) => void | — | Controlled selection and its handler. |
| defaultValue | string | — | Initial value when uncontrolled. |
| disabled | boolean | false | Disables the whole control. |
SelectGroup / SelectLabel
Wrap related options so screen readers announce the group, not just visual spacing.
| Prop | Type | Default | Description |
|---|---|---|---|
| SelectLabel children | ReactNode | — | Heading text for the group (required inside SelectGroup for accessibility). |
SelectItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | The value submitted when this item is chosen (required). |
| disabled | boolean | false | Makes a single option non-selectable. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Space | Opens the menu when the trigger is focused. |
| Arrow+Down | Moves to the next option. |
| Arrow+Up | Moves to the previous option. |
| Enter | Selects the highlighted option. |
| Esc | Closes without changing the value. |
- Implements the ARIA listbox pattern with type-ahead — start typing to jump to an option.
- Use SelectLabel inside a SelectGroup so groups are announced, not just visually separated.
- For native mobile behaviour with zero JS, prefer Native Select.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Always set a placeholder via SelectValue for empty state.
- Group and label options once a list grows past ~7 items.
Don’t
- Don’t use Select for boolean choices — use a Switch or Checkbox.
- Don’t put interactive controls other than options inside the menu.