KeyValueList
Labelled facts about one thing, such as account or server details. The inline layout puts labels beside values when there is room and stacks them on a phone; columns fits more facts on wide screens.
- KeyValueList
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, KeyValueList
- Name
- Ada Lovelace
- ada.lovelace@analytical-engine.example.com
- Phone
- Not set
- Plan
- TeamRenews on 1 December 2026
- Open invoices
- 0
- Region
- Frankfurt
- Uptime
- 41 days
- Version
2.4.1- Memory
- 3.1 of 8 GB
- Disk
- 62%Warns at 80%
- Last backup
- Today, 03:00
Dark theme, KeyValueList
- Name
- Ada Lovelace
- ada.lovelace@analytical-engine.example.com
- Phone
- Not set
- Plan
- TeamRenews on 1 December 2026
- Open invoices
- 0
- Region
- Frankfurt
- Uptime
- 41 days
- Version
2.4.1- Memory
- 3.1 of 8 GB
- Disk
- 62%Warns at 80%
- Last backup
- Today, 03:00
High contrast theme, KeyValueList
- Name
- Ada Lovelace
- ada.lovelace@analytical-engine.example.com
- Phone
- Not set
- Plan
- TeamRenews on 1 December 2026
- Open invoices
- 0
- Region
- Frankfurt
- Uptime
- 41 days
- Version
2.4.1- Memory
- 3.1 of 8 GB
- Disk
- 62%Warns at 80%
- Last backup
- Today, 03:00
UsageLink to the section Usage
import { KeyValueList } from '@skribly/ui/data'<KeyValueList emptyValue="Not set" items={[
{ label: 'Email', value: user.email },
{ label: 'Plan', value: 'Team', hint: 'Renews on 1 December' }
]} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A description list, so each value is read with its label.
- A missing value shows the emptyValue words rather than a blank.
- Long values such as email addresses wrap instead of overflowing, and the layout follows the width of its own box, so it reflows at 400% zoom.
This demo runs through axe in all three themes on every test run. See what the tests check.