Data List
Key/value details — an order's number, status and total; a profile's email, role and join date — as a real <dl>, so a screen reader reads each label with its value rather than as two unrelated runs of text.
Walkthrough
1. Basic
An order's details as a real <dl>. The labels sit in a column beside their values, and the whole list stacks once it is narrower than 24rem.
- Order
- #4021
- Status
- Paid
- Customer
- Kurdistan Coffee Roasters
- Placed
- 3 March 2026, 2:20 PM
- Delivery note
- Not set
<script lang="ts"> import { Badge, DataList, DataListItem } from 'omaris';</script><DataList dividers class="max-w-lg"> <DataListItem label="Order" value="#4021" copyable /> <DataListItem label="Status"> <Badge tone="success" variant="tonal">Paid</Badge> </DataListItem> <DataListItem label="Customer" value="Kurdistan Coffee Roasters" /> <DataListItem label="Placed" value="3 March 2026, 2:20 PM" /> <DataListItem label="Delivery note" /></DataList>2. Profile
vertical stacks each label over its value — the shape of a profile panel. copyable adds a copy button whose own tick is the confirmation; a string copies something other than what is shown, like the full key behind a mask.
- Name
- Grace Hopper Grace Hopper
- grace@example.com
- API key
- sk_live_••••••••4f2a
- Role
- Owner
<script lang="ts"> import { Avatar, DataList, DataListItem } from 'omaris';</script><DataList orientation="vertical" class="max-w-sm"> <DataListItem label="Name"> <span class="inline-flex items-center gap-2"> <Avatar size="xs" name="Grace Hopper" colorize /> Grace Hopper </span> </DataListItem> <DataListItem label="Email" value="grace@example.com" copyable> {#snippet icon()} ... {/snippet} </DataListItem> <DataListItem label="API key" value="sk_live_••••••••4f2a" copyable="sk_live_51Hx9q2Lp4f2a" /> <DataListItem label="Role" value="Owner" /></DataList>3. Receipt
align="end" is the receipt: every figure at the far edge, lined up under the one above. size steps the type and the row padding together.
- Subtotal
- 42,000 IQD
- Delivery
- 3,500 IQD
- Discount
- −5,000 IQD
- Total
- 40,500 IQD
<script lang="ts"> import { Card, DataList, DataListItem } from 'omaris';</script><Card class="w-80 max-w-full"> <DataList align="end" size="sm"> <DataListItem label="Subtotal" value="42,000 IQD" /> <DataListItem label="Delivery" value="3,500 IQD" /> <DataListItem label="Discount" value="−5,000 IQD" /> </DataList> <DataList align="end" size="lg" class="border-t border-border pt-3"> <DataListItem label="Total" value="40,500 IQD" classes={{ value: 'font-semibold' }} /> </DataList></Card>4. Overridden
labelWidth sets the label column, and the caller's own style and aria-label are kept beside it. classes reaches a row's parts — here a monospaced tracking number with its own copy label.
- Carrier
- Aramex
- Tracking
- AX-99120-IQ
- Weight
- 2.4 kg
<script lang="ts"> import { DataList, DataListItem } from 'omaris';</script><DataList labelWidth="7rem" style="max-width: 28rem" aria-label="Shipment" dividers class="w-full divide-dashed"> <DataListItem label="Carrier" value="Aramex" /> <DataListItem label="Tracking" value="AX-99120-IQ" copyable copyLabel="Copy tracking number" classes={{ label: 'text-primary', content: 'font-mono' }} /> <DataListItem label="Weight" value="2.4 kg" /></DataList>