Forms
NativeSelect
The platform’s own picker, restyled where it can be.
When to reach for it
Examples
default
The platform's own picker — better on a phone, and it works without JavaScript.
Notes
A native <select>, restyled.
The escape hatch, not the default — Select is the styled one. Reach for this where the platform's own picker is genuinely better: a very long list on a phone, a form that must work without JavaScript, a page where the last kilobyte matters. The browser gives typeahead and the mobile wheel for free, and those are real.
What it cannot do is look like the rest of the system once open. The option list is drawn by the operating system, so it carries none of these tokens — which is exactly why it stopped being the default.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| invalid | boolean | Paints the resting border with `--danger` and reflects `aria-invalid`. | |
| ref | Ref<HTMLSelectElement> | — |
Also accepts everything in SelectHTMLAttributes<HTMLSelectElement>. Those are forwarded to the underlying element and are not listed row by row.
Keyboard
| Key | Does |
|---|---|
| Space↓ | Opens the platform picker. |
| a–z | Typeahead, from the browser’s own implementation. |
Accessibility
- Typeahead and the mobile wheel come free, from the browser.
- What it cannot do is look like the rest of the system once open — the option list is drawn by the operating system and carries none of these tokens.