Grid List

A grid list is where your interactive items chill, letting you navigate with your keyboard, pick one or multiple, and even drop some row actions.

Basic

A basic grid list is an excellent way for users to browse through items, perfect for selecting one or multiple items, and also supports row actions.

Preview

Code

The Beatles

Led Zeppelin

Pink Floyd

Queen

The Rolling Stones

The Who

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 Grid List's decked out with several components to make it bangin'.

Checkbox

Click to check or uncheck, like making a choice on a quiz, simple and straightforward for quick decisions.

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

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.

Note that I haven't set an id for the grid list item as the items already have default IDs. However, you should specify the id prop for each grid list item like this:

{(item) => <GridListItem id={item.name}>{item.name}</GridListItem>}

The grid list supports drag and drop functionalities if you use the dragAndDropHooks prop along with the useDragAndDrop hook. You can drop data on the entire list, individual items, add new items between existing ones, or rearrange items.

Dragging Between Items

You can move items between positions within the grid list.

Render Empty State

The grid list can display an empty state when no items are available using the renderEmptyState prop.

Preview

Code

No bands selected

Controlled

The grid list can be controlled, which means the parent component manages the selection state of each item.

Disabled

Similar to how the Tag Group component can be disabled using isDisabled for children and disabledKeys for the parent, the Grid List supports similar functionality. For example, items "Led Zeppelin" and "The Rolling Stones" are disabled.

To disable items via the parent component, you can use the disabledKeys prop like this:

<GridList
  items={items}
  aria-label="Select your favorite bands"
  selectionMode="multiple"
  disabledKeys={[2,5]}
  className="min-w-64"
>
  {(item) => <GridListItem id={item.id}>{item.name}</GridListItem>}
</GridList>

Tree Choicebox