Components
Select
Accessible single-value picker built on Radix.
The Select primitive wraps Radix Select — a keyboard-accessible replacement
for the native <select> with a styled trigger, scrollable content, groups, and
labels.
Preview
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue,} from '@web/components/ui/select';export default function SelectDemo() { return ( <Select> <SelectTrigger className="w-56"> <SelectValue placeholder="Select a plan" /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectLabel>Plans</SelectLabel> <SelectItem value="free">Free</SelectItem> <SelectItem value="pro">Pro</SelectItem> <SelectItem value="team">Team</SelectItem> <SelectItem value="enterprise">Enterprise</SelectItem> </SelectGroup> </SelectContent> </Select> );}Import
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";Props
SelectTrigger accepts every Radix Select.Trigger prop plus a size
("sm" | "default"). The table is generated at build time from the real
SelectTriggerProps type in the apps/web source. Open state, value, and
disabled behavior are controlled through the root Select (Radix
Select.Root) props.
Prop
Type