Select
A Select lets users choose one option from a fixed list. It wraps a native <select> element, styled with the Win95 sunken bevel, so it keeps full keyboard and form support.
Overview
When to use
- To choose one value from a small-to-medium fixed list (a category, a month, a status).
- Inside forms alongside labels and validation messages.
When not to use
- For a handful of mutually exclusive options that should all stay visible — use radio buttons instead.
- For free-form text — use a TextInput.
States
Disabled
Disabled selects reduce to 40% opacity and show a not-allowed cursor. The disabled prop is a standard HTML attribute passed directly to the native element.
Focus
On focus, the inner bevel deepens — the same treatment used by TextInput. This state is CSS-driven (:focus) and not statically renderable in a story.
Controls
Interactive controls are available in Storybook. Open Storybook
Props
Token mapping
| Property | Token |
|---|---|
| background | --color-bg-page |
| text color | --color-text-primary |
| font family | --fontfamily-primary |
| bevel (top-left outer) | --sunken-outer-dark |
| bevel (bottom-right outer) | --sunken-outer-light |
| bevel (top-left inner) | --sunken-inner-dark |
| bevel (bottom-right inner) | --sunken-inner-light |
Do's and don'ts
Do
- Keep option labels short and scannable.
- Pair the select with a visible
<label>associated viaid/htmlFor.
Don't
- Use a Select for fewer than three options — prefer radio buttons or a segmented control.
- Nest option groups without a clear grouping label.
Changelog
| Date | Change |
|---|---|
| 2026-07-18 | Added stories and documentation to bring the component into compliance with the folder standard |
| 2026-03-15 | Initial component created |