Description List

Beta

Get Ritla UI

Label and value pairs for receipts, transfer reviews and account details.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add description-list
Also works with shadcn: npx shadcn@latest add @ritla/description-list
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

description-list.tsx

import { DescriptionItem, DescriptionList } from "@/components/ui/description-list";<DescriptionList title="Transfer details">  <DescriptionItem label="To">Noor Al-Hassan</DescriptionItem></DescriptionList>

API reference

DescriptionList

Prop	Type	Default	Description
`variant`	`"card" \| "muted" \| "plain"`	`"card"`	Figma's Style.
`title`	`ReactNode`	None	Figma's Title.
`action`	`ReactNode`	None	Figma's Show action: an Edit link.

DescriptionItem

Prop	Type	Default	Description
`label`	`ReactNode`	None	Figma's Label.
`children`	`ReactNode`	None	Figma's Value: text, an Amount or a Tag.
`layout`	`"horizontal" \| "stacked"`	`"horizontal"`	Figma's Layout.
`icon`	`IconComponent`	None	Figma's Show icon.
`copyValue / copyLabels`	`string / { copy, copied }`	None	Figma's Show copy: a named copy button.
`divider`	`boolean`	`true`	Figma's Show divider; the last item has none.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves to the copy buttons and links.

ARIA

The list is a <dl>: labels are <dt>, values <dd>.
The copy button is named and says Copied afterwards.

Arabic and RTL notes

Mirrors

The label at the start, the value at the end.

Does not mirror

Account numbers and references are isolated left to right.

Numerals: Values as the app passes them.
Arabic typography: Label body-14, value body-14 Medium.
Mixed-direction text: Each value is isolated in a <bdi> that finds its own direction, while the cell keeps the page's: an IBAN reads left to right and still sits under its label.