List Box

Installation

Examples

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.

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

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>