How to build an accessible StructuredList in React

Static lists use table/row/cell roles so columns are announced; selectable lists become a radiogroup of role=radio rows with roving tabindex, so arrow keys move focus and Enter/Space check a row exactly like native radios

When to use a StructuredList

• Presenting a set of related records in aligned columns the user scans top to bottom
• Letting the user pick exactly one row from a short, readable list (selectable)
• Carbon-style structured content where a full data table is heavier than needed

When not to use it

• Sorting, filtering, pagination, or multi-select over many rows — use DataTable
• Free-form vertical content without column alignment — use List

Keyboard interactions

Role table, verified at WCAG 2.2-AA.

• ArrowDown
• ArrowUp
• Home
• End
• Enter
• Space

Common mistakes

Avoid: selectable with multiple rows marked selected

Prefer: A single selected id (value/defaultValue) — selection is single-choice

The selectable variant is a radiogroup; multiple selected rows break the radio semantics

Example

<StructuredList headers={["Name", "Role"]} items={[{ id: "a", cells: ["Ada", "Engineer"] }]} />

See the full StructuredList reference →