Forms · Application UI
Select
An accessible dropdown select built on Base UI's Select primitive, composed of compound parts (trigger, content, items, groups, labels, separators) with animated popover positioning and keyboard navigation.
Feature showcase
Installation
Features
7 examples
Default, Controlled, Disabled, Grouped, Sizes, With Error, With Icon.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "default" | Controls the height of the trigger button (h-7 for sm, h-8 for default). |
| side | "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end" | "bottom" | Which side of the trigger the dropdown content opens on (passed to SelectContent). |
| sideOffset | number | 4 | Gap in pixels between the trigger and the dropdown content (passed to SelectContent). |
| align | "start" | "center" | "end" | "center" | Alignment of the dropdown content relative to the trigger (passed to SelectContent). |
| alignOffset | number | 0 | Pixel offset applied along the alignment axis (passed to SelectContent). |
| alignItemWithTrigger | boolean | true | When true, the selected item inside the popup aligns with the trigger position (passed to SelectContent). |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/select.tsx |
| Default example | content/examples/select/default.tsx |
| Controlled example | content/examples/select/controlled.tsx |
| Disabled example | content/examples/select/disabled.tsx |
| Grouped example | content/examples/select/grouped.tsx |
| Sizes example | content/examples/select/sizes.tsx |
| With Error example | content/examples/select/with-error.tsx |
| With Icon example | content/examples/select/with-icon.tsx |