Select
Picks one option from a dropdown list.
Installation
pnpm dlx shadcn@latest add https://yea-ui.vercel.app/r/select.json
Usage
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@/components/ui/select"<Select defaultValue="web">
<SelectTrigger className="w-240">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="ios">iOS</SelectItem>
<SelectItem value="web">Web</SelectItem>
</SelectContent>
</Select>API reference
Select
Alias for the Base UI Select root. Holds value state.
SelectTrigger
Button that opens the list. Renders the chevron; put SelectValue inside.
SelectContent
Glass popup with the item list.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "bottom" | Preferred side of the trigger. |
align | "start" | "center" | "end" | "start" | Alignment along the trigger edge. |
sideOffset | number | 8 | Gap between trigger and popup in pixels. |
alignItemWithTrigger | boolean | false | Overlay the selected item on the trigger like a native select. |
SelectItem
One option. Shows a check indicator when selected; value is required.
SelectGroup, SelectLabel, SelectSeparator
Group items under a label or divide them.
All other props are forwarded to the underlying Base UI component.