<ListBox aria-label="Framework" onAction={() => console.log("action")}>
<ListBoxItem>Next.js</ListBoxItem>
<ListBoxItem>Remix</ListBoxItem>
<ListBoxItem>Astro</ListBoxItem>
<ListBoxItem>Gatsby</ListBoxItem>
</ListBox>npx shadcn@latest add @dotui/list-boxUse list boxes to display a list of options and allow users to select one or more of them.
import { ListBox, ListBoxItem } from "@/components/ui/list-box";<ListBox aria-label="Options" selectionMode="single">
<ListBoxItem>Option 1</ListBoxItem>
<ListBoxItem>Option 2</ListBoxItem>
<ListBoxItem>Option 3</ListBoxItem>
</ListBox>Use the controls below to experiment with different list box props and see the live preview and code update.
The type of selection that is allowed in the collection.
SelectionModeThe primary orientation of the items. Usually this is the direction that the collection scrolls.
Orientation<ListBox
aria-label="Options"
orientation="vertical"
selectionMode="single"
>
<ListBoxItem id="alpha">Alpha</ListBoxItem>
<ListBoxItem id="beta">Beta</ListBoxItem>
<ListBoxItem id="gamma">Gamma</ListBoxItem>
</ListBox>Junior Garcia
jrgarcia@example.com
A listbox displays a list of options and allows a user to select one or more of them.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
DragAndDropHooks<NoInfer<T>> | — | ||
"grid" | "stack" | 'stack' | ||
Orientation | 'vertical' | ||
DOMRenderFunction<"div", ListBoxRenderProps> | — | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
ReactNode | function | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
SelectionBehavior | "toggle" | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
"clearSelection" | "none" | 'clearSelection' | ||
A ListBoxItem represents an individual option in a ListBox.
| Prop | Type | Default | |
|---|---|---|---|
"danger" | "default" | 'default' | ||
ReactNode | function | — | ||
Key | — | ||
boolean | — | ||
union | — | ||
string | — | ||
T | — | ||
Last updated on 5/22/2026