opinion
Select
A closed list of choices.
Project statusNative feel, custom list
Status
Project
84% done
Status is required.
In context
Filter the boardTwo selects in a filter bar, and the picker on phones
Filter the board
Project
Sort by
Draft launch checklistDue Fri
ResearchIcon auditTo do
DesignHarbour homepageIn progress
DesignBrand paletteDone
DesignNew task
Project
Status
New task
Project
Status
Status is required.
Native
nativeThe platform's own select (the OS picker on a phone) with the same options and onValueChange. --rebar-select-* tokens style it.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
options | (SelectOption | SelectOptionGroup)[] | Yes | — |
value | string | undefined | No | — |
defaultValue | string | undefined | No | — |
onValueChange | ((value: string) => void) | undefined | No | — |
placeholder | string | undefined | No | — |
disabled | boolean | undefined | No | — |
size | "sm" | "md" | "lg" | undefined | No | md |
className | string | undefined | No | — |
invalid | boolean | undefined | No | — |
aria-label | string | undefined | No | — |
native | boolean | undefined | No | — |
id | string | undefined | No | — |
name | string | undefined | No | — |
required | boolean | undefined | No | — |
Accessibility
A real Radix select: the trigger is a <button> with aria-haspopup and aria-expanded, the list a role="listbox". Arrow keys move, typing jumps to a match, Enter picks, Escape closes; a disabled option is announced as such.
data-rebar-* attributes
data-rebar-component="select" on the trigger, with data-rebar-size; .rebar-select-content on the popover.
Migrating to Ant Design
AntD's Select takes options, value and onChange: a close, low-risk rename.
Option groups
options may mix plain options with { label, options: [...] } groups. Each group renders its label as a small uppercase heading (an ARIA group named by it) above its options, with a hairline between groups.
<Select aria-label="Food" options={[{ value: "none", label: "None" }, { label: "Fruit", options: [{ value: "apple", label: "Apple" }] }]} />