List Box

ListBox are designed to present and manage lists of options or data entries, allowing users to view and select from multiple choices efficiently.

Basic

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

Installation

Multiple Selection

To enable multiple selections, set the selectionMode prop to multiple. Since this prop has no default value, you must define it explicitly.

Item Details

Enhance list items by providing additional details through the ListBoxItemDetails component.

Section

Display items in a ListBox grouped by sections.

Rearrange

Enable drag and drop functionality in the ListBox using the dragAndDropHooks prop with the useDragAndDrop hook. This allows for rearranging items, adding new entries between existing ones, or managing data across the entire list.

Controlled

Make sure you set the selectionMode prop to single to enable controlled mode. This will allow you to manage the ListBox selection by using the selectedKey prop.

Disabled

Disable specific ListBox items.

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

<ListBoxItem isDisabled>Disabled</ListBoxItem>