DataList
Key-value pairs rendered as a description list
Category: display · WCAG 2.2-AA · key-value, description, metadata, details
Variants
- horizontal
- vertical
Sizes
- sm
- md
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id?: string; label: ReactNode; value: ReactNode }[] | — | The items to render. |
orientation | 'horizontal' | 'vertical' | horizontal | Layout orientation of the component. |
dividers | boolean | false | When true, shows dividers between items. |
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
Design tokens
--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-border--cascivo-space-3--cascivo-space-4
When to use
- Displaying read-only key-value metadata (profile fields, record summaries)
- Presenting structured attributes where each value maps to a single label
- Compact detail panels next to or below a primary subject
When not to use
- Editable fields — use form Inputs, not a DataList
- Tabular data with many rows and columns — use a Table
How to build an accessible DataList in React →
Examples
Horizontal data list
<DataList
items={[
{ label: 'Name', value: 'Ada Lovelace' },
{ label: 'Role', value: 'Mathematician' },
]}
/>Vertical with dividers
<DataList
orientation="vertical"
dividers
items={[{ label: 'Email', value: '[email protected]' }]}
/>Related components
- ContainedList — ContainedList shows single-value rows; DataList shows labelled pairs