Select
A closed field that opens a list of options. Matches Input in height (40), radius (8) and border so forms line up.
States
Placeholder, Filled, Error, Disabled.
<Select options={[{ value: "terra", label: "Terracotta" }]} placeholder="Choose an option" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | { value, label }[] | — | Choices. |
placeholder | string | "Choose an option" | Shown until a value is picked. |
error | boolean | false | Error border. |
disabled | boolean | false | Disabled state. |
Usage
Do
- Use for 5+ options.
- Keep option labels short.
Don't
- Use for 2–3 options — use radios or a segmented control.