Select
Styled select dropdown built on Radix UI Select
Preview
Usage
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectGroup,
SelectLabel,
SelectItem,
SelectSeparator,
} from "@/components/ui/select"
<Select>
<SelectTrigger className="w-[200px]">
<SelectValue placeholder="Select a role" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Roles</SelectLabel>
<SelectItem value="admin">Admin</SelectItem>
<SelectItem value="editor">Editor</SelectItem>
<SelectItem value="viewer">Viewer</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Other</SelectLabel>
<SelectItem value="guest">Guest</SelectItem>
</SelectGroup>
</SelectContent>
</Select>Use onValueChange on the Select root for controlled state. The content automatically positions using popper mode.
Install
npx shadcn add @bonsai/select