Select
Animated select menu with proximity hover, bordered/borderless variants, optional leading icons, and spring-animated popover.
Installation
Basic
Inspect
Variants
Inspect
With Icons
Inspect
Groups
Inspect
Scrollable List
Inspect
Error State
Inspect
Please select a role to continue.
Disabled
Inspect
API Reference — Select
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled selected value. |
| defaultValue | string | — | Uncontrolled default value. |
| onValueChange | (value: string) => void | — | Called when the selected value changes. |
| disabled | boolean | false | Disables the entire select. |
| name | string | — | Name for form submission. |
| required | boolean | false | Marks the select as required in forms. |
API Reference — SelectTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "bordered" | "borderless" | "bordered" | Visual style of the trigger. |
| icon | IconComponent | — | Optional icon displayed before the value. |
| placeholder | string | "Select…" | Text shown when no value is selected. |
| error | string | — | Error message shown below the trigger. |
API Reference — SelectItem
| Prop | Type | Default | Description |
|---|---|---|---|
| index | number | — | Position index within the content for proximity hover. |
| value | string | — | Unique value for this option. |
| icon | IconComponent | — | Optional icon displayed before the label. |
| disabled | boolean | false | Disables this individual item. |