List Box

Basic

ListBoxes can be enhanced with features such as multi-selection, filtering, and dynamic data updates. They are commonly used in applications to display and manage lists of options or data entries.

Installation

npx shadcn@latest add @intentui/list-box

Composed components

Manual installation

npm i react-aria-components @intentui/icons

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>

Multiple selection

To enable multiple selections, set the selectionMode prop to multiple. This prop has no default value, so it must be explicitly defined.

Description

You can enhance list items by providing additional details using the Listbox.Description component.

Section

Group items in a ListBox using sections for better organization.

Rearrange

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

ListBox can handle large datasets efficiently with infinite scrolling. This allows for loading more data as the user scrolls down, improving performance and user experience.

Controlled

To enable controlled mode, set the selectionMode prop to single. This allows you to manage the ListBox selection using the selectedKey prop.

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>