ListBox

Copy for LLM

A listbox displays a list of options and allows a user to select one or more of them.

Import

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

Live Editor

Guidelines

When to use

ListBox is for a flat list of label-only options from a single attribute, one or many, with no per-row actions.

Do

For multi-select, Shift+click range-selects between the last selected option and the focused option.

Avoid

Using ListBox when rows include per-row actions, or as the list inside Combobox. Use GridList.
Using ListBox when rows share comparable columns for compare, sort, filter, or bulk edit. Use Table.
Using ListBox when there are fewer than about 3 short options that should stay visible. Use RadioGroup.
Using ListBox for command or navigation lists. Use Menu.

Examples

Basic Usage

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

Multiple Selection

You can enable multiple selection by setting the selectionMode prop to “multiple”.

Using Data Objects

You can pass an array of items to the ListBox and use a render function to display them.

Custom Item Rendering

You can customize the appearance of list items by rendering additional components inside them.

Sections / Grouping

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