DescriptionList

Terms and their values as a native description list: a record’s fields, a request’s payload.

import { DescriptionList } from '@zitdevs/ui';

Examples

Email

[email protected]

Start date

1 March 2024

Country

SpainFrom the payroll system · read-only

Manager

Not provided

<DescriptionList
  items={[
    { term: 'Email', details: '[email protected]' },
    { term: 'Start date', details: <time dateTime="2024-03-01">1 March 2024</time> },
    { term: 'Country', details: 'Spain', aside: 'From the payroll system · read-only' },
    { term: 'Manager' },
  ]}
/>

Stacked at every width:

Email

[email protected]

Start date

1 March 2024

Country

SpainFrom the payroll system · read-only

Manager

Not provided

<DescriptionList layout="stacked" items={items} />

Props

Prop	Type	Default	Notes
items	readonly DescriptionItem[]	required	{ term, details?, aside? }. With no items nothing renders.
layout	'inline' | 'stacked'	'inline'	inline sets the term beside its details from sm; stacked never does.
labels	Partial<DescriptionListLabels>	English	{ empty }, the placeholder. es.descriptionList from labels/es.
ref	Ref<HTMLDListElement>	—	The <dl>.
className	string	—	Placement.
anything else	<dl> attributes	—

A field’s details is any content. Without one — undefined, null, false or an empty string — the placeholder shows; 0 is a value. aside says whose the value is, under it.

Exported types: DescriptionListProps, DescriptionItem, DescriptionListLabels, and the label sets descriptionListLabels.

Accessibility

• A native <dl>. Each <dt> and its <dd> sit in one <div>, which HTML allows and which keeps the pair together for assistive technology.
• A missing value is written out (“Not provided”), never left blank.
• The aside is inside the same <dd>, so a screen reader reads it with the value.

Without JavaScript

It needs none, and renders as a Server Component.

Theming

muted for the terms, the placeholder and the aside, ink for the values, and border-subtle for the rules between fields.