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 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
If you hit any issues, make sure you check out the installation guide here for more information.
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
The List Box comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
Make sure you also install the composed components and the required packages for the component to function properly.
Anatomy
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.