List Box
A listbox displays a list of options and allows a user to select one or more of them.
Installation
Preview
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.
Selected: 3
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.
Selected: 1
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>