Description list
A description list shows label and value pairs on one baseline, in a label column and a value column.
Previewapps/web/components/ui/KbDescriptionList.tsx
Facts about an object
- Channel
- Email
- Status
- Open
- Team
- No team yet
Show code
<KbDescriptionList>
<KbDescriptionItem label="Channel">Email</KbDescriptionItem>
<KbDescriptionItem label="Status"><KbLozenge tone="sky">Open</KbLozenge></KbDescriptionItem>
<KbDescriptionItem label="Team" muted>No team yet</KbDescriptionItem>
</KbDescriptionList>
When to use
- Use it for read-only facts or inline-editable fields in a side panel.
- Labels are body S medium in subtle ink; values are body M. A value is never louder than its section heading.
- Use muted for an empty value, in words (No team yet), not a blank.
- If a value is unknown, print an en dash. Never invent one.
DoSay what is empty, in words.Don'tLeave a blank value. People wonder if it failed to load. Import
import { KbDescriptionItem, KbDescriptionList } from "@/components/ui/KbDescriptionList";
<KbDescriptionList>
<KbDescriptionItem label="Channel">Email</KbDescriptionItem>
</KbDescriptionList>
Props
KbDescriptionList| Prop | Type | Default | What it does |
|---|
children | KbDescriptionItem[] | None | The rows. |
|---|
KbDescriptionItem| Prop | Type | Default | What it does |
|---|
label | ReactNode | None | The term. |
|---|
muted | boolean | false | Quiet value for an empty state. |
|---|
children | ReactNode | None | The value: text, a lozenge, a select or an input. |
|---|
Keyboard and screen readers
- Renders a real dl with dt and dd, so a screen reader announces term and definition.
- A control in a value (select or input) needs its own accessible name; the label column is not a label for it.
- Long values wrap rather than clip.