FactList
StableShort label and value pairs, such as Check-in: 3pm.
Also known as description list, key value list, definition list, properties
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Facts about a booking
- Check-in
- From 3pm
- Check-out
- By 11am
- Plan
- Free cancellation
<FactList facts={[
{ label: "Check-in", value: "From 3pm" },
{ label: "Check-out", value: "By 11am" },
{ label: "Plan", value: <Badge tone="success">Free cancellation</Badge> },
]} />Label on the left, value on the right.
When to use it
Gives the answer a light, scannable shape for the details people compare: times, plans, sizes, prices.
Made of: Label · Value · Row
Use it for
- Three to eight short facts about one thing.
- Details inside an answer, a card or a panel.
- Facts that are still arriving, with placeholders.
Not for
- Many rows people sort or filter: use DataTable.
- Several things compared side by side: use ComparisonTable.
- A single number that matters most: use StatTile.
Do and avoid
- Check-in
- From 3pm
- Check-out
- By 11am
- Walk to metro
- 4 min
- About
- The hotel offers check-in from 3pm and asks guests to leave by 11am; the metro is a short walk away.
Do
- Keep each value short.
- Use the same labels in the same order across similar results.
- Show placeholders while facts stream in.
Avoid
- Do not use it for long paragraphs.
- Do not put actions inside values.
- Do not use it for a table people need to sort.
On a phone
- Label and value stay on one line and the value wraps under itself when long.
- Two columns become one on a phone.
Seen in products
- OpenUI's library has EntityList and snippet items for short label and value details inside an answer.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| factsrequired | { label: string; value: ReactNode }[] | none | The pairs to show, in order. |
| layout | "split" | "stacked" | "split" | Side by side, or label above value. |
| columns | 1 | 2 | 1 | Two columns on wide screens. |
| loading | boolean | false | Shows placeholder rows while the facts arrive. |
| loadingRows | number | 3 | How many placeholder rows to show. |
| emptyLabel | string | none | Said when there are no facts. Nothing is drawn when omitted. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one FactList switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Layout | layout | Split, Stacked |
| Loading | loading | On or off |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- facts
- Label and value pairs, side by side or stacked.
- loading
- Placeholder rows hold the space while the facts arrive, marked busy.
- empty
- Says the empty label, or draws nothing when there is none.
- long value
- A long value wraps under itself instead of pushing the label out.
Tokens
Change one of these and every part that uses it follows.
--fg--fg-muted--text-body
Built in
- A description list (dl, dt, dd), so each value is read with its label.
- Placeholder rows are marked busy while the facts arrive.
What you need to do
- Keep labels short and the same across similar lists.
- Put units in the value (3pm, 4 min), not only in the label.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide