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.
Default
Controlled
Currency
Disabled
Entire select disabled
Individual items disabled
Grouped
Sizes
Default
Small
With Error
With Icon
Theme preference
Notification style
Layout view
Installation
npx shadcn@latest add @byronwade/selectProps
| 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). |