NativeSelect

A hand-drawn box around a real native select, with a chevron and an error state.

Overview

NativeSelect wraps a real native <select> in a hand-drawn box with a chevron. Unlike Select (a fully custom listbox), it keeps the platform’s native dropdown — which is the right call on touch devices, for very long option lists, and when you want the OS’s native picker. Pass <option> children exactly as you would to a bare <select>.

Anatomy

A Radix Label above a sketchy box containing the native <select> (its own border and arrow removed via appearance: none) and an overlaid chevron icon. When an error is set, the field is marked invalid and the message is rendered in a role="alert". Every color, padding, radius, and sketch parameter comes from @ghds/tokens (comp.nativeSelect.*).

Variants & States

No named variants — the field reacts to focus, and disabled / error set its state.

Usage

Accessibility

• A Radix Label is associated with the <select> via htmlFor / id, so the control has a real accessible name and the label is clickable.
• Error state is exposed with aria-invalid and aria-describedby pointing at a role="alert" message, so screen readers announce both the invalid state and the reason.
• Because the underlying element is a real <select>, all native keyboard behavior and the OS picker come for free.
• The chevron is decorative (pointer-events: none) and never intercepts interaction.
• See the Accessibility Guide for shared conventions.

Content

Keep option labels short and parallel. Use a placeholder <option value=""> (e.g. “Select a fruit…”) only when no default is appropriate; otherwise pre-select the most common choice.

Props API

On React Native, NativeSelect wraps @react-native-picker/picker, an optional peer dependency — install it in your app with pnpm add @react-native-picker/picker.

Code examples

// React — @ghds/react
import { NativeSelect } from '@ghds/react/native-select';

// <option> children + onChange + error string
<NativeSelect label="Fruit" error="Please choose a fruit." onChange={(e) => setValue(e.target.value)}>
  <option value="">Select a fruit…</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</NativeSelect>;

<!-- Web Components — @ghds/web-components -->
<script type="module">
  import '@ghds/web-components/native-select';
</script>
<!-- Slot a real <select>; `invalid` (boolean), not an error string -->
<gh-native-select label="Fruit" invalid>
  <select>
    <option value="">Select a fruit…</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select>
</gh-native-select>

// React Native — @ghds/react-native — requires the picker peer dependency:
//   pnpm add @react-native-picker/picker
import { NativeSelect } from '@ghds/react-native/native-select';

// Data-driven via items[] + selectedValue/onValueChange (no <option> children)
<NativeSelect
  label="Fruit"
  placeholder="Select a fruit…"
  selectedValue={value}
  onValueChange={setValue}
  items={[
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ]}
/>;

Live Demo

React and Web Components render live below, driven by the same tokens — open either to see the native OS picker, and toggle dark mode in the header to see both respond identically. React exposes the message as an error string; Web Components expose the boolean invalid state. React Native can’t run in a browser without additional react-native-web wiring (not set up in this site), so its usage is shown as a code sample instead — and it is data-driven (an items array) rather than taking <option> children.