ContainedList
Labelled list of rows inside a bordered container
Category: display · WCAG 2.2-AA · list, container, rows, group
Variants
- on-page
- disclosed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Text label for the control. |
kind | 'on-page' | 'disclosed' | on-page | Visual treatment — 'on-page' or 'disclosed'. |
action | ReactNode | — | Primary action shown in the component. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-bg-subtle--cascivo-radius-surface--cascivo-focus-ring
When to use
- Grouping a short set of related rows under a visible heading in a bordered surface
- Presenting selectable or navigable rows (settings groups, member lists)
- Separating a labelled cluster of items from surrounding page content
When not to use
- A long, virtualised data set — use a Table or DataList instead
- Plain bulleted prose where the container border adds no meaning — use List
How to build an accessible ContainedList in React →
Examples
Basic contained list
<ContainedList label="Members">
<ContainedListItem>Ada Lovelace</ContainedListItem>
<ContainedListItem>Alan Turing</ContainedListItem>
</ContainedList>Interactive rows
<ContainedList label="Settings" kind="disclosed">
<ContainedListItem asChild>
<button type="button" onClick={open}>Profile</button>
</ContainedListItem>
</ContainedList>Related components
- List — List is for unbordered prose lists; ContainedList adds a labelled surface
- ContainedListItem — Each row is a ContainedListItem