Data List
Pairs of labels and values, such as contract details or a price breakdown.
- Contract number
- V-2024-0815
- Start date
- 1 March 2024
Usage
import {
DataList,
DataListItem,
DataListLabel,
DataListValue,
} from '@epilot/spark-ui/data-list'<DataList>
<DataListItem>
<DataListLabel>Contract number</DataListLabel>
<DataListValue>V-2024-0815</DataListValue>
</DataListItem>
</DataList>A long value wraps; unless stacked, each value sits at the end of its row, however wide the row is. Format values yourself; DataList does not format numbers or currencies.
Examples
Dotted
Set variant="dotted" to join each label to its value with a dotted line, as
in a price breakdown. Set className="font-semibold" on the total's item.
- Base price
- €12.90 / month
- Energy price
- 32.40 ct / kWh
- Estimated annual cost
- €1,126.80
Stacked
Set variant="stacked" to put each label above its value, for values too long
to share a row with their label, such as an address. Stacked labels are muted
so they read apart from their values.
- Account holder
- Maria Schneider
- Delivery address
- Hauptstraße 12, 10115 Berlin
API Reference
DataList
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'plain' | 'dotted' | 'stacked' | 'plain' | dotted draws a dotted line between label and value; stacked puts the label above the value. |
className | string | — | Merges with the base styles. |
Other <dl> props pass through.
DataListItem
One label and value pair. Renders a <div>; its props pass through.
DataListLabel
Renders a <dt>; its props pass through.
DataListValue
Renders a <dd>; its props pass through.
Accessibility
- DataList renders a description list (
<dl>,<dt>,<dd>), which exposes each label and value as a pair. - The dotted line is a decorative
Separator with
aria-hidden.