synthetic
Descriptions
A label and value grid for structured details, with optional click-to-edit values.
Project detailsTwo columns, one item spanning both
Harbour rebrand
- Project
- Harbour rebrand
- Owner
- Maya Chen
- Due
- 24 Oct 2026
- Budget
- £48,200
- Summary
- Identity, site and launch kit for the harbour trust.
Click a value
- Owner
- Due
- Budget
- £48,200
Signage
- Owner
- Not assigned
- Due
- 21 Nov 2026
Depot signage
- Summary
- Wayfinding for the three northern depots, including fascia, bay numbers and the ferry-side map.
In context
Project panelDetails above the activity, on a card and a phone
Harbour rebrand
MCOn track
Details
- Owner
- Maya Chen
- Due
- 24 Oct 2026
- Budget
- £48,200
Harbour rebrand
Details
- Owner
- Maya Chen
- Due
- 24 Oct 2026
- Budget
- £48,200
Props
| Prop | Type | Required | Default |
|---|---|---|---|
title | ReactNode | No | — |
items | DescriptionItem[] | Yes | — |
column | number | undefined | No | 3 |
className | string | undefined | No | — |
onItemChange | ((index: number, newValue: string) => void) | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Editable values
Set editable on an item to make its value click-to-edit. The value must be a plain string; anything else stays static. onItemChange(index, newValue) fires on commit, and you hold the state, since Descriptions keeps none.
Accessibility
A real <dl> with a <dt>/<dd> pair per item, the structure a screen reader already understands as label/value data.
data-rebar-* attributes
data-rebar-component="descriptions", data-rebar-part="title" | "item".
Migrating to Ant Design
AntD's Descriptions uses nested Descriptions.Item children rather than a flat items array, and its column can be a responsive object: a structural rewrite, not a mechanical rename.