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
If you hit any issues, make sure you check out the installation guide here.
Composed Components
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The List Box's decked out with several components to make it bangin'.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
And next, you can copy the code below and paste it into your dopest component folder.
Anatomy
Import the components and use them as shown below, adapting the structure to fit each component.
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>