How to build an accessible Select in React

Renders a native <select> so options, type-ahead, and arrow-key navigation come from the platform; error text is linked via aria-describedby and role="alert" with aria-invalid on the control.

When to use a Select

• Choosing exactly one value from a known, finite list inside a form
• A compact single-value picker where the native OS dropdown UX is acceptable
• You want zero-JS reliability and built-in mobile/keyboard handling from a real <select>

When not to use it

• Users need to filter/search a long list — use Combobox
• Multiple values must be selectable — use MultiSelect
• Triggering actions or commands rather than picking a form value — use Dropdown or Menu

Keyboard interactions

Role listbox, verified at WCAG 2.2-AA.

• ArrowUp
• ArrowDown
• Space

Common mistakes

Avoid: <Select options={fiftyCountries} placeholder="Search country" />

Prefer: <Combobox options={fiftyCountries} />

A long unfiltered native list is hard to scan; Combobox adds type-ahead filtering

Example

<Select label="Role" options={[{ value: "admin", label: "Admin" }]} />

See the full Select reference →