Components / Forms
Select
stableA single-choice dropdown, built on the native <select> for full keyboard and screen-reader support.
Default
Filter results by status
States
Select a status
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | No | Field label. |
hint | string | — | No | Helper text shown below the field. |
error | string | — | No | Error message — replaces the hint. |
required | boolean | false | No | Shows a red asterisk next to the label. |
...props | SelectHTMLAttributes | — | No | All standard <select> props (value, onChange, disabled, etc). |
Do
- Order options logically — alphabetical, or by expected frequency of use.
- Include a neutral first option ("Select a status") when there is no sensible default.
- Keep option labels short enough to read without truncation.
Don't
- Use a Select for fewer than 3 options — Toggle or a radio group reads faster.
- Pre-select an option the user is likely to miss changing.