Skip to content
Content

DescriptionList

Label/value pairs via DescriptionList.Item for metadata displays.

React source Core source

DescriptionList

Semantic key/value display using <dl> / <dt> / <dd>. Compose with DescriptionList.Item or an items array; optionally collapse with maxItems.

Examples

Default

A titled single-column metadata block.

Details
Owner
Ada
Status
Active
Demo.tsxtsx
import { DescriptionList } from '@var-ui/react';

<DescriptionList title="Details">
  <DescriptionList.Item label="Owner">Ada</DescriptionList.Item>
  <DescriptionList.Item label="Status">Active</DescriptionList.Item>
</DescriptionList>

Horizontal multi-column

Set columns="multi" with labelPosition="start" for side-by-side label/value pairs in a multi-column grid.

Project
Owner
Ada Lovelace
Status
Active
Region
us-west-2
Plan
Pro
Demo.tsxtsx
import { DescriptionList } from '@var-ui/react';

<DescriptionList columns="multi" labelPosition="start" title="Project">
  <DescriptionList.Item label="Owner">Ada Lovelace</DescriptionList.Item>
  <DescriptionList.Item label="Status">Active</DescriptionList.Item>
  <DescriptionList.Item label="Region">us-west-2</DescriptionList.Item>
  <DescriptionList.Item label="Plan">Pro</DescriptionList.Item>
</DescriptionList>

Props

Accessibility

Uses native description-list semantics (dl/dt/dd). Keep labels short and unique within the list. When maxItems enables “Show more”, the toggle is a real button for keyboard users.