Components

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.

Nirvana
Radiohead
Foo Fighters
Arctic Monkeys
The Strokes

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

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'.

Dropdown

Dropdown's a slick component used in other parts of your project that need dropdown, like menu, select, combo box, and more.

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.

Anatomy

Multiple Selection

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

Apple
Banana
Orange
Strawberry
Grapes
Mango
Pineapple
Selected: 3

Item Details

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

AdminHas full access to all resources
EditorCan edit content but has limited access to settings
ViewerCan view content but cannot make changes
ContributorCan contribute content for review
GuestLimited access, mostly for viewing purposes

Section

Display items in a ListBox grouped by sections.

Abbey Road
Sgt. Pepper's Lonely Hearts Club Band
Revolver
Led Zeppelin IV
Physical Graffiti
Houses of the Holy
Led Zeppelin II
The Dark Side of the Moon
The Wall
Wish You Were Here
Animals
Meddle
A Night at the Opera
News of the World
Sheer Heart Attack
The Game
Jazz
Queen II
Let It Bleed
Sticky Fingers
Exile on Main St.
Beggars Banquet
Some Girls
Tattoo You
Nevermind
In Utero
Bleach
The Doors
L.A. Woman
Strange Days
Morrison Hotel
OK Computer
Kid A
The Bends
In Rainbows
Back in Black
Highway to Hell
Let There Be Rock
Who's Next
Tommy
Quadrophenia
My Generation
The Who Sell Out

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.

Nirvana
Radiohead
Foo Fighters
Arctic Monkeys
The Strokes

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.

Apple
Banana
Orange
Strawberry
Grapes
Mango
Pineapple
Selected: 1

Disabled

Disable specific ListBox items.

Apple
Banana
Orange
Strawberry
Grapes
Mango
Pineapple

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

<ListBoxItem isDisabled>Disabled</ListBoxItem>