List
Group related items into repeatable rows for quick scanning.
Fieldwork Press
Project files
Ready to print
Coastal field guide
24 pages · Updated today
Workshop invitation
2 pages · Updated yesterday
Working drafts
Headland trail notes
6 pages · Updated today
Autumn reading list
3 pages · Updated Monday
4 files shown · 1 saved
Behavior
Keyboard
- Tab
- Move between the list’s interactive controls.
- Enter / Space
- Activate a row button; ordinary lists do not need arrow-key navigation.
Parts
Group heading
Names the collection.
Row
One item with primary text and optional supporting text.
Row action
A clearly named control belonging to one item.
States
Grouped
Section headings divide a longer collection into meaningful subsets.
Filtered
Show the remaining count and an explicit empty result.
Action
A secondary action updates only its own item.
References
Use it
Figma
Build the list
- Create one row component with primary text, supporting text, and an optional action.
- Stack instances under a group heading with consistent spacing.
- Add a filtered empty state and a long-title variant.
Accessibility
A styled list remains a semantic list. Only its links and controls belong in the tab order.
- Use ordered lists only when the sequence conveys meaning.
- Give repeated actions item-specific accessible names.
- Keep a secondary button separate from any primary row link.
Research notes & sources
Use ul and li for unordered items, or ol and li when sequence matters.
- Reference image attribution and licensesSource and capture record
- Contained list: usageIBM Carbon Design System
- Content structureW3C WAI