Select
v0.4.0A bare select control (built on Radix's `Select`) — the Radix trigger button is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome.
A bare select control (built on Radix's Select) — the Radix trigger button is this component's own root element. It has no built-in label/hint/error; wrap it in FormField for that chrome.
Usage
Pass aria-invalid="true" to visually mark the field as invalid (pair with FormField's error prop for the message).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption[] | — | Array of { label, value, disabled? } (required) |
value | string | — | Controlled selected value |
defaultValue | string | — | Uncontrolled initial value |
onValueChange | (value: string) => void | — | Called when the selection changes |
placeholder | string | — | Placeholder shown when nothing is selected |
disabled | boolean | false | Disables the field |
required | boolean | false | Marks field as required |
className | string | — | Additional class names |
Compositions
Open all 4 →Properties
Select props
| Prop | Type | Default | Description |
|---|---|---|---|
options* | SelectOption[] | — | Options rendered in the dropdown |
asChild | boolean | — | — |
className | string | — | Additional class names to merge with the component root element |
defaultValue | string | — | Initial selected value for uncontrolled usage |
name | string | — | Form field name submitted with the value |
onValueChange | ((value: string) => void) | — | Called with the new value when the selection changes |
placeholder | string | — | Text shown when no value is selected |
required | boolean | — | Marks the field as required for form validation |
value | string | — | Controlled selected value |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).