How to build an accessible NativeSelect in React

It is a real <select>, so the browser provides the combobox role, keyboard interaction, and announcement. aria-invalid is set when invalid; the placeholder is a disabled hidden first option so it shows but is not selectable.

When to use a NativeSelect

• A standard single-choice dropdown where native behavior and form integration matter most
• Mobile-first forms that should use the platform picker UI
• Pairing with a Field/Label inside a regular HTML form

When not to use it

• Multi-select, search/typeahead, or rich option rendering — use the custom Select/Combobox
• A handful of mutually exclusive options where radios read better

Keyboard interactions

Role combobox, verified at WCAG 2.2-AA.

• ArrowUp
• ArrowDown
• Enter
• Space
• Home
• End

Common mistakes

Avoid: <NativeSelect options={oneHundredOptionsWithIcons} />

Prefer: <Combobox options={...} />

Native <option> cannot render icons or be searched; use a custom listbox for rich options

Example

<NativeSelect
  placeholder="Choose a country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'de', label: 'Germany' },
  ]}
  onChange={(e) => setCountry(e.target.value)}
/>

See the full NativeSelect reference →