On this page
Alpha
Beta
Gamma
Props
orientation
<ListBox aria-label="Options">
<ListBoxItem id="alpha">Alpha</ListBoxItem>
<ListBoxItem id="beta">Beta</ListBoxItem>
<ListBoxItem id="gamma">Gamma</ListBoxItem>
</ListBox>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/list-boxUsage
Use 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>Examples
Next.js
Remix
Astro
Gatsby
Mushroom
Olives
Onion
Pepperoni
Fresh basil
Bacon
ReadView files and discussions.
WritePush branches and open pull requests.
MaintainManage the repository without admin access.
AdminFull access including settings and billing.
Edit
Copy link
Share
Add to favorites
Rename project
Duplicate
Open in new tab
Delete project
Signature sauce
BBQ sauce
Honey mustard
Pepperjack
Mozzarella
Blue cheese
Bacon
Sauteed onions
New file
Open…
Save
Save as…
Print…
Preferences
JG
Junior Garcia
jrgarcia@example.com
Profile
Settings
Log out
Hobby
Pro
Enterprise (sold out)
Premium support (coming soon)
List
Rows
Grid
Next.js
Remix
Astro
Gatsby
SolidStart
Qwik City
No results found.
Framework
Create new file…
Create new folder…
Assign to…
Change status…
Change priority…
Add label…
Remove label…
API Reference
ListBox
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' | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
function | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
SelectionBehavior | 'toggle' | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
"clearSelection" | "none" | 'clearSelection' | ||
ListBoxItem
A ListBoxItem represents an individual option in a ListBox.
| Prop | Type | Default | |
|---|---|---|---|
"danger" | "default" | 'default' | ||
ReactNode | function | — | ||
Key | — | ||
boolean | — | ||
string | — | ||
T | — | ||
ListBoxSection
A ListBoxSection represents a section within a ListBox.
| Prop | Type | Default | |
|---|---|---|---|
Key | — | ||
T | — | ||
union | — | ||
Iterable<T> | — | ||
readonly any[] | — | ||
ListBoxSectionHeader
Header rendered at the top of a ListBoxSection.
| Prop | Type | Default | |
|---|---|---|---|
ListBoxLoader
ListBoxVirtualizer
A Virtualizer renders a scrollable collection of data using customizable layouts. It supports very large collections by only rendering visible items to the DOM.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | — | ||
T | — |
Last updated on 6/16/2026