List Box

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/list-box

Composed components

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components @heroicons/react cn

Anatomy

import { ListBox, ListBoxItem } from "@/components/ui/list-box"

<ListBox aria-label="Bands">
  <ListBoxItem>Nirvana</ListBoxItem>
  <ListBoxItem>Radiohead</ListBoxItem>
  <ListBoxItem>Foo Fighters</ListBoxItem>
  <ListBoxItem>Arctic Monkeys</ListBoxItem>
  <ListBoxItem>The Strokes</ListBoxItem>
</ListBox>

Examples

Multiple selection

Set selectionMode="multiple" to allow multiple selections.

Description

Add supporting text with ListBoxDescription.

Section

Group items in a ListBox using sections for better organization.

Drag and drop

Enable drag-and-drop functionality in the ListBox by using the dragAndDropHooks prop with the useDragAndDrop hook. This allows users to rearrange items, insert new entries, or manage data across the list.

Infinite scrolling

Load more items as users scroll with infinite scrolling.

Controlled

For controlled selection, pass selectedKeys and update it with onSelectionChange. Set selectionMode="single" to allow one selected item.

Disabled

Disable specific ListBox items to restrict user interaction.

You can also disable an item directly by passing the isDisabled prop to ListBoxItem.

<ListBoxItem isDisabled>Disabled</ListBoxItem>

Component API

ListBox

ListBoxItem

ListBoxLabel

ListBoxDescription

ListBoxSection