StructuredList
Tabular row list for scannable data, optionally single-selectable
Category: display · WCAG 2.2-AA · display, list, table, data
Variants
- static
- selectable
States
- default
- selected
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Alias of `ariaLabel` — the same invisible accessible name under the other spelling. Neither is deprecated. |
ariaLabel | string | — | Invisible accessible name. The catalog convention; the DOM spelling `aria-label` is accepted as an alias so either guess compiles. |
aria-label | string | — | Accessible label for the list table. |
items | { id: string; cells: ReactNode[]; selected?: boolean }[] | — | The items to render. |
headers | ReactNode[] | — | The column header cells. |
selectable | boolean | false | When true, rows can be selected. |
value | string | — | The controlled value. |
defaultValue | string | — | The initial value when uncontrolled. |
onSelect | (id: string) => void | — | Called with the selected value. |
Design tokens
--cascivo-color-border--cascivo-color-bg-subtle--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-primary--cascivo-color-surface--cascivo-focus-ring
When to use
- 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
- Sorting, filtering, pagination, or multi-select over many rows — use DataTable
- Free-form vertical content without column alignment — use List
How to build an accessible StructuredList in React →
Examples
Static
<StructuredList headers={["Name", "Role"]} items={[{ id: "a", cells: ["Ada", "Engineer"] }]} />Selectable
<StructuredList selectable defaultValue="a" items={[{ id: "a", cells: ["Ada"] }, { id: "b", cells: ["Grace"] }]} onSelect={(id) => set(id)} />