All componentsoutlinesubtlexssmmdlg
Select
Custom listbox-style select with trigger, indicator, and item slots in outline and subtle styles.
Astro
Next.js
Remix
Vite
Variants
Astro
Next.js
Remix
Vite
Astro
Next.js
Remix
Vite
Sizes
Astro
Next.js
Remix
Vite
Astro
Next.js
Remix
Vite
Astro
Next.js
Remix
Vite
Astro
Next.js
Remix
Vite
Install
zsh — select
1bunx stylexblocks add selectUsage — Ark UI
select.tsx
1234567891011121314151617181920212223242526272829303132333435import { Select, createListCollection } from "#components/ui/ark-ui/select.tsx";
const frameworks = createListCollection({ items: ["Astro", "Next.js", "Remix", "Vite"],});
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context — Indicator and ItemIndicator ship default icons <Select.Root collection={frameworks} defaultValue={["Next.js"]} variant="outline" size="md"> <Select.Label>Framework</Select.Label> <Select.Control> <Select.Trigger> <Select.ValueText /> </Select.Trigger> <Select.IndicatorGroup> <Select.Indicator /> </Select.IndicatorGroup> </Select.Control> {/* Positioner portals the panel and positions it under the trigger */} <Select.Positioner> <Select.Content> {frameworks.items.map((item) => ( <Select.Item key={item} item={item}> <Select.ItemText>{item}</Select.ItemText> <Select.ItemIndicator /> </Select.Item> ))} </Select.Content> </Select.Positioner> <Select.HiddenSelect /> </Select.Root> );}