Data List

Semantic key-value pairs rendered as a native <dl> (definition list). Ideal for displaying record details, settings summaries, or any structured label + value content.

Basic Usage

<x-wirekit::data-list>
    <x-wirekit::data-list.item label="Name">John Doe</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Email">john.doe@mail</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Plan">Pro ($29/mo)</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Joined">June 1, 2024</x-wirekit::data-list.item>
</x-wirekit::data-list>

The value can also be passed as value, which reads naturally when it comes straight from a model. It is rendered as text. When an item has both, the slot wins, so use the slot for anything with markup, such as a badge or a link.

<x-wirekit::data-list>
    <x-wirekit::data-list.item label="Order" value="SO-10482" />
    <x-wirekit::data-list.item label="Carrier" value="Standard shipping" />
    <x-wirekit::data-list.item label="Delivered" value="March 14, 2025" />
</x-wirekit::data-list>

Layouts

Horizontal (default)

Labels on the left, values on the right. Items separated by dividers:

<x-wirekit::data-list layout="horizontal">
    <x-wirekit::data-list.item label="Status">Active</x-wirekit::data-list.item>
</x-wirekit::data-list>

Stacked

Labels above values, each item spaced vertically:

<x-wirekit::data-list layout="stacked">
    <x-wirekit::data-list.item label="Description">A long description that wraps naturally in a stacked layout without being constrained by a side-by-side arrangement.</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Category">Engineering</x-wirekit::data-list.item>
</x-wirekit::data-list>

Grid

Two columns, and one on a screen narrower than 40rem:

<x-wirekit::data-list layout="grid">
    <x-wirekit::data-list.item label="First Name">John</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Last Name">Doe</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Email">john.doe@mail</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Phone">+1 (555) 123-4567</x-wirekit::data-list.item>
</x-wirekit::data-list>

Summary

The totals shape — an invoice subtotal block, a cart summary, an order overview. The label takes whatever width is left over; the value is as wide as its own content and sits flush right, so amounts line up under one another along a single column edge. Values are set in tabular figures, so digits occupy equal widths and the decimal points stack:

<x-wirekit::data-list layout="summary">
    <x-wirekit::data-list.item label="Subtotal">$1,240.00</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Shipping">$12.50</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Tax (19%)">$238.08</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Total">$1,490.58</x-wirekit::data-list.item>
</x-wirekit::data-list>

Use it wherever a value is a quantity rather than a description. grid cannot express this shape — its two tracks are equal, so the amount is handed half the row and floats in the middle of its own whitespace — and horizontal cannot either, because its label track is a fixed third of the width, so a long label wraps while the center of the row sits empty.

Two deliberate differences from the other three layouts:

• No row separators, and no per-item padding. Row rhythm comes from the grid's row gap instead. A totals block rules the line above the grand total, not every line — add that rule yourself where it belongs.
• A class on an item has no visual effect. The item's wrapper is display: contents here, so that its <dt> and <dd> can be the grid's own items. Style the value through the slot content instead.

Detail

The mirror of summary, and the commoner of the two: the label is as wide as its own text and the value takes the rest. This is the ordinary detail list — a customer, a payment method, a shipping option — where the value is a description rather than a quantity:

<x-wirekit::data-list layout="detail">
    <x-wirekit::data-list.item label="Customer">Dana Ortiz</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Payment method">Credit card ending 4242</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Shipping">Standard, 3–5 business days</x-wirekit::data-list.item>
</x-wirekit::data-list>

grid is the tempting wrong choice here. Its two tracks are equal, so a short label like "Shipping" is handed half the row and the value the other half, leaving the two standing apart with the middle of the row empty.

It shares summary's grid mechanics — the items become the list's own grid cells, so the value column is one track measured across every row — and deliberately not its alignment. A summary value is an amount and sits flush right in tabular figures so the digits stack; a detail value is prose, and right-aligning a sentence strands it against the far edge.

Rich Values

The value slot accepts any content, including other WireKit components:

<x-wirekit::data-list>
    <x-wirekit::data-list.item label="Status"><x-wirekit::badge intent="success">Active</x-wirekit::badge></x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Plan"><x-wirekit::badge>Pro</x-wirekit::badge></x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Next billing">December 1, 2024</x-wirekit::data-list.item>
</x-wirekit::data-list>

Props

Container

Item

Accessibility

• Uses native <dl>, <dt>, <dd> HTML elements — screen readers announce content as a definition list.
• No ARIA attributes needed — the semantic HTML provides the accessibility contract.
• Label text styled with muted color but readable at WCAG AA contrast ratios via design tokens.

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

• label is escaped; the value is not. A <strong> passed to the label prop renders as text — {{ $label }} escapes it. The value is the item's default slot, and a slot is Htmlable, so it passes through unescaped: that is what makes the Rich Values example above work. For a rich key, render it in the slot and leave label unset. data-list.item has no named slots, so there is nothing else to reach for.
• Don't reach for summary when the value is prose. It sizes the value track to the content, so a sentence pushes the label into a narrow column. stacked is the layout for long values.

Design Tokens