Select
Displays a list of options for the user to pick from, triggered by a button.
Installation
npx shadcn@latest add @uqudo/selectUsage
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/uqudo/ui/select"<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>The trigger is w-fit by default, so give it a width when the selected value
should not resize it. Control the selection with value and onValueChange on
Select, exactly like the Radix primitive.
Examples
Scrollable
Long lists scroll inside the popover. Group related options with
SelectGroup and SelectLabel.
Sizes
API Reference
Select
The root. Holds the open and value state and forwards every prop of
SelectPrimitive.Root (value, defaultValue, onValueChange, open,
disabled, name, required, ...).
SelectTrigger
Prop
Type
SelectContent
Prop
Type
SelectItem
Prop
Type
Other parts
| Component | Renders | Notes |
|---|---|---|
SelectValue | SelectPrimitive.Value | Shows the selected label or the placeholder. |
SelectGroup | SelectPrimitive.Group | Wraps a SelectLabel and its items. |
SelectLabel | SelectPrimitive.Label | Muted, small heading for a group. |
SelectSeparator | SelectPrimitive.Separator | A one-pixel divider between items or groups. |
SelectScrollUpButton | SelectPrimitive.ScrollUpButton | Already rendered by SelectContent. |
SelectScrollDownButton | SelectPrimitive.ScrollDownButton | Already rendered by SelectContent. |
Each part carries a data-slot attribute named after it (select,
select-trigger, select-content, select-item, ...). The trigger also
exposes data-size.