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 — Base UI
listbox.tsx
123456789101112131415161718192021import { Listbox } from "#components/ui/base-ui/listbox.tsx";
const options = ["All activity", "Mentions only", "Weekly digest", "Muted"];
export function Example() { return ( // Base UI has no listbox machine, so Root owns the selection state // (value/defaultValue/onValueChange); parts compose through render <Listbox.Root defaultValue="Weekly digest" variant="subtle"> <Listbox.Label>Notifications</Listbox.Label> <Listbox.Content aria-label="Notifications"> {options.map((option) => ( <Listbox.Item key={option} value={option}> <Listbox.ItemText>{option}</Listbox.ItemText> <Listbox.ItemIndicator /> </Listbox.Item> ))} </Listbox.Content> </Listbox.Root> );}