Select

Native select menu styled to match the design system

Category: inputs · WCAG 2.2-AA · form, dropdown, menu

Sizes

Prop	Type	Default	Description
`label`	`string`	—	Text label for the control.
`hint`	`string`	—	Supplementary hint text shown with the control.
`error`	`string`	—	Error message shown when the value is invalid.
`placeholder`	`string`	—	Placeholder text shown when the field is empty.
`options`	`{ value: string; label: string; disabled?: boolean }[]`	—	The selectable options.
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Visual size of the component (e.g. 'sm', 'md', 'lg').
`disabled`	`boolean`	`false`	When true, disables the control and removes it from the tab order.
`value`	`string`	—	The controlled value.
`defaultValue`	`string`	—	The initial value when uncontrolled.
`onChange`	`React.ChangeEventHandler<HTMLSelectElement>`	—	Called with the change event; read the new value from `event.target.value`.
`ariaLabel`	`string`	—	Invisible accessible name, for when a visible element outside this component already labels it and `label` would render that text a second time. ⚠ `label` on this component is visible; `IconButton.label`/`Sparkline.label` are invisible names, which is the prior that costs adopters a duplicated label. The raw DOM `aria-label` still wins over this.

Choosing exactly one value from a known, finite list inside a form
A compact single-value picker where the native OS dropdown UX is acceptable
You want zero-JS reliability and built-in mobile/keyboard handling from a real <select>

Users need to filter/search a long list — use Combobox
Multiple values must be selectable — use MultiSelect
Triggering actions or commands rather than picking a form value — use Dropdown or Menu

<Select label="Role" options={[{ value: "admin", label: "Admin" }]} />

<Select label="Country" placeholder="Choose…" options={countries} />