Select
When to use Select
Use a select for single-choice picking from a known, finite list
of 3–15 options. The native <select> element is the substrate's
canonical pattern — keyboard navigation (arrows, Home/End,
type-ahead) and screen-reader announcement work without
JavaScript.
When to use
- Country picker, language picker, status picker, role picker.
- Any single-choice form field with a knowable enum.
When not to use
- Two or three options visible at once: use radio buttons.
- 15+ options or open-ended search: use a combobox (subsequent milestone).
- Multiple selection: use a multi-select pattern (subsequent milestone).
Native > custom
Custom <div role="listbox"> selects are an anti-pattern under
WCAG 2.2 — replicating the native keyboard, focus, and announcement
behaviour correctly is more work than it appears, and most attempts
ship subtle bugs. The native <select> is the right answer at this
scale.
Important Information
Design System disclosure
This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.