GridList

Copy for LLM

A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.

Note: Use GridList when your list items may contain interactive elements such as buttons, checkboxes, menus, etc. within them. If your list items contain only static content such as text and images, then consider using ListBox instead for a slightly better screen reader experience (especially on mobile).

Import

import { GridList } from "@cfa/react-core";

Live Editor

Guidelines

When to use

GridList is an interactive list with keyboard navigation, single or multiple selection, and optional per-row actions.

Do

Prefer GridList over ListBox when rows need per-row actions or richer row content than a flat label.
Typically compose GridList as the list inside Combobox when people pick one or many options and rows may include actions, such as an info control on an item.

Avoid

Using GridList for simple, label-only selection. Use ListBox.
Using GridList for tabular data people compare, sort, filter, or bulk-edit. Use Table.
Using GridList for command or navigation lists. Use Menu.

Examples

Basic Usage

A GridList with selectable items. The component handles keyboard navigation, focus management, and accessibility automatically.

Multiple Selection with Checkboxes

You can enable multiple selection with checkboxes by setting the selectionMode to “multiple” and adding a Checkbox component with a slot="selection" prop.

Sections / Grouping

GridList supports using sections to group items. When using sections, it is preferred that you group all of the available options. Leaving some items as “ungrouped” can sometimes cause confusion.

With Interactive Elements

The GridList component can include interactive elements like buttons within each item. This example demonstrates how to add an IconButton to each item.