Listbox
A component for creating keyboard-navigable selection lists and grids.
Installation
pnpm add @diceui/listboxInstallation with shadcn/ui
pnpm dlx shadcn@latest add @diceui/listboxLayout
Import the parts, and compose them together.
import {
ListboxRoot,
ListboxGroup,
ListboxGroupLabel,
ListboxItem,
ListboxItemIndicator,
} from "@diceui/listbox"
return (
<ListboxRoot>
<ListboxGroup>
<ListboxGroupLabel/>
<ListboxItem >
<ListboxItemIndicator />
</ListboxItem>
</ListboxGroup>
</ListboxRoot>
)Examples
Horizontal Orientation
Set orientation="horizontal" to create a horizontally navigable list.
Grid Layout
For grid layouts, use orientation="mixed" to enable navigation in both directions.
Use CSS Grid to arrange the items in a grid structure. In grid layouts,
arrow keys will navigate accordingly:
- Up/Down: Navigates within a column
- Left/Right: Navigates within a row
Grouped Items
Group items together to create a list of related options.
API Reference
Listbox
The root component for creating listboxes.
Prop
Type
ListboxGroup
A group of items inside the selectable list.
Prop
Type
ListboxGroupLabel
A label for the group of items.
Prop
Type
ListboxItem
An item inside the selectable list.
Prop
Type
ListboxItemIndicator
A visual indicator that shows when the item is selected.
Prop
Type
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab | Focuses the last active item in the list. |
| Shift + Tab | Moves focus to previous focusable item in the list. |
| ArrowUp | Moves highlighting to previous item in vertical lists. |
| ArrowDown | Moves highlighting to next item in vertical lists. |
| ArrowLeft | Moves highlighting to previous item in horizontal lists. |
| ArrowRight | Moves highlighting to next item in horizontal lists. |