All components
Listbox
An always-visible option list with selection indicators in subtle and solid panels.
Notifications
All activity
Mentions only
Weekly digest
Muted
Variants
Notifications
subtleAll activity
Mentions only
Weekly digest
Muted
Notifications
solidAll activity
Mentions only
Weekly digest
Muted
Install
zsh — listbox
1bunx stylexblocks add listboxUsage — Ark UI
listbox.tsx
123456789101112131415161718192021222324import { Listbox, createListCollection } from "#components/ui/ark-ui/listbox.tsx";
const options = createListCollection({ items: ["All activity", "Mentions only", "Weekly digest", "Muted"],});
export function Example() { return ( // the variant resolves once on Root; every part inherits it via // context — ItemIndicator ships a default check and only shows on // selected items <Listbox.Root collection={options} defaultValue={["Weekly digest"]} variant="subtle"> <Listbox.Label>Notifications</Listbox.Label> <Listbox.Content> {options.items.map((option) => ( <Listbox.Item key={option} item={option}> <Listbox.ItemText>{option}</Listbox.ItemText> <Listbox.ItemIndicator /> </Listbox.Item> ))} </Listbox.Content> </Listbox.Root> );}