Select
v1.0.0A keyboard-navigable dropdown selection control with animated portal rendering, listbox semantics, multiple visual variants, and error state support.
Basic Select
A simple select with label, placeholder, and a list of options. Click to open and select via click or keyboard.
Controlled Select
Use <code>value</code> and <code>onChange</code> to manage the selected value from parent state.
Selected: us-east
Glass Variant
A frosted glass aesthetic with backdrop blur on both the trigger and the dropdown list.
Notion Variant
A flat, minimal style matching Notion's design language with subtle borders and no shadow.
Error State
Pass an <code>error</code> string to show destructive border styling and an animated error message below the trigger.
Please select a valid deployment region.
Disabled State
Set <code>disabled</code> to prevent interaction. The trigger appears faded and cannot be opened.
API Reference
Properties accepted by the dropdown selection control.
Property | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'glass' | 'notion' | 'default' | Controls the visual style of both the trigger button and dropdown list. |
| label | string | undefined | Label rendered above the select trigger button. |
| placeholder | string | 'Select an option...' | Fallback text when no option is currently selected. |
| options | SelectOption[] | required | Array of value-label pairs rendered as listbox options. |
| value | string | undefined | Controlled selected value for the select control. |
| defaultValue | string | undefined | Uncontrolled initial selected value on first render. |
| onChange | (value: string) => void | undefined | Callback triggered when an option is selected. |
| disabled | boolean | false | Disables the trigger and prevents listbox expansion. |
| error | string | undefined | Error message rendered below the trigger with destructive styling. |