Components
Select
Dropdown selection input with sm/md/lg/xl sizes and an error state, built on Radix UI.
Installation
npx asteria-ui add selectUsage
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
<Select onValueChange={setFramework}>
<SelectTrigger aria-label="Framework">
<SelectValue placeholder="Select a framework" />
</SelectTrigger>
<SelectContent>
<SelectItem value="react">React</SelectItem>
<SelectItem value="vue">Vue</SelectItem>
</SelectContent>
</Select>Examples
Sizes
States
API reference
SelectTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "md" | Density — 32 / 40 / 48 / 56px trigger height. |
| error | boolean | — | Marks the trigger invalid — sets aria-invalid and the error border color. |
| disabled | boolean | — | Disables the trigger — prevents opening the listbox. |
Select, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, and SelectSeparator pass their props straight through to the underlying Radix UI Select primitives.
Related components
- Dropdown Menu — for actions, not selection
- Radio Group — for small option sets
- Field — wraps with label + helper
Accessibility
Accessibility
Role. The trigger has an implicit
role="combobox"witharia-expandedreflecting the open state.Listbox.
aria-controlslinks the trigger to the listbox;aria-activedescendanttracks the highlighted option.Keyboard. Arrow keys navigate options, Enter selects, Escape closes, and type-ahead search jumps to a matching option.
Error. The
errorprop setsaria-invalid="true"on the trigger.