Select
Select
A Radix Select — single-value dropdown, SelectValue truncates a long chosen label instead of overflowing the trigger. For choosing several values, see MultiSelect.
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectGroup,
SelectLabel,
SelectItem,
} from "@pompeitech/vesuvius-ui";Default
Controlled, with a label
Grouped, with a separator and disabled items
Sizes
SelectTrigger follows the shared control height scale: 28, 32, 36, and 40 px.
API
Select
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | string | Controlled/uncontrolled selected value. | |
onValueChange | (value: string) => void | ||
disabled | boolean | false | |
required | boolean | false | For native form validation. |
name | string | For plain (non-JS) form submission. |
SelectTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "default" | "lg" | "default" | Control height: 28, 32, 36, or 40 px. |
Plus every native <button> prop.
SelectValue
| Prop | Type | Description |
|---|---|---|
placeholder | ReactNode | Shown when nothing's selected. |
Shows the selected item's label otherwise. Truncates instead of overflowing the trigger, no matter how long the label is.
SelectContent
| Prop | Type | Default | Description |
|---|---|---|---|
position | "popper" | "item-aligned" | "popper" | "popper" positions relative to the trigger like a normal popover; "item-aligned" (the native <select>-like behavior) aligns the selected item over the trigger instead. |
Plus every native <div> prop; rendered in a Portal.
SelectGroup — every native <div> prop; groups related items for role="group" semantics.
SelectLabel — every native <div> prop; non-interactive heading for a SelectGroup.
SelectItem
| Prop | Type | Description |
|---|---|---|
value | string | Required — the value this item represents. |
disabled | boolean |
SelectSeparator — every native <div> prop; a thin rule between groups.
Accessibility
A fully keyboard-operable native-<select>-equivalent: Space/Enter opens it, ↑/↓ moves between options, typing jumps to a matching item, Esc closes without changing the selection. Always give SelectTrigger an accessible name — either id + a <Label htmlFor> (as in the controlled example above) or aria-label when there's no visible label, as in the earlier examples.