All components
Select
Custom listbox-style select with trigger, indicator, and item slots in outline and subtle styles.
Framework
Variants
Framework
outlineFramework
subtleSizes
Framework
xsFramework
smFramework
mdFramework
lgInstall
zsh — select
1bunx stylexblocks add selectUsage — Base UI
select.tsx
1234567891011121314151617181920212223242526272829303132import { Select } from "#components/ui/base-ui/select.tsx";
const frameworks = ["Astro", "Next.js", "Remix", "Vite"];
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context — Icon and ItemIndicator ship default icons <Select.Root defaultValue="Next.js" variant="outline" size="md"> <Select.Label>Framework</Select.Label> <Select.Control> <Select.Trigger> <Select.Value /> </Select.Trigger> <Select.IndicatorGroup> <Select.Icon /> </Select.IndicatorGroup> </Select.Control> {/* Positioner portals the popup and positions it under the trigger */} <Select.Positioner> <Select.Popup> {frameworks.map((item) => ( <Select.Item key={item} value={item}> <Select.ItemText>{item}</Select.ItemText> <Select.ItemIndicator /> </Select.Item> ))} </Select.Popup> </Select.Positioner> </Select.Root> );}