Descriptions
descriptionsDisplays labeled record fields in horizontal or vertical, bordered or unbordered layouts.
Usage
Basic usage
horizontal layout: key left value right; declared with DescriptionsItem child node, span controls spanning columns.
<Descriptions title="User Information">
<DescriptionsItem label="Name">Zhang San</DescriptionsItem>
<DescriptionsItem label="gender">Male</DescriptionsItem>
<DescriptionsItem label="Birthday">1995-08-12</DescriptionsItem>
<DescriptionsItem label="Remarks" span={3}>VIP customers, priority will be given to after-sales work orders</DescriptionsItem>
</Descriptions>Vertical layout
layout=vertical Key up and value down, suitable for mobile terminals or scenarios with long values.
<Descriptions layout="vertical" column={3}>
<DescriptionsItem label="Name">Zhang San</DescriptionsItem>
<DescriptionsItem label="Remarks" span={3}>VIP customers, priority will be given to after-sales work orders</DescriptionsItem>
</Descriptions>Border table state
bordered is rendered as a separated table style, and extra is placed in the upper right operating area.
<Descriptions
bordered
title="Order Details"
extra={<a href="#edit">Edit</a>}
items={[
{ label: "Username", children: "zhangsan" },
{ label: "Address", children: "A Block 1203, No. 88, XX Road, Tianhe District, Guangzhou City, Guangdong Province", span: 3 },
]}
/>Single column length details
column=1 Each item has its own row, suitable for contract/voucher type vertical key values.
<Descriptions
bordered
column={1}
items={[
{ label: "Contract No.", children: "HT-2026-000812" },
{ label: "Contracting Party", children: "Guangzhou Hulian Technology Co., Ltd." },
{ label: "Amount", children: "¥ 128,000.00" },
{ label: "Status", children: "Effective" },
]}
/>When to use
Use Descriptions for flat read-only fields in a detail page or drawer, such as user, order, or contract information. Use JsonViewer for nested JSON, or List for an entry stream with actions.
Import
import { Descriptions, DescriptionsItem } from "@hulianui/ui"Props
DescriptionsProps:
| Name | Type | Default | Description |
|---|---|---|---|
| column | number | 3 | Columns per row. |
| layout | "horizontal" | "vertical" | "horizontal" | Places labels beside or above values. |
| bordered | boolean | false | Enables a bordered table-like layout. |
| items | DescriptionsItemData[] | — | Data-driven entries, taking precedence over child items. |
Slots
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Upper-left title. |
| extra | ReactNode | Upper-right actions. |
DescriptionsItem and DescriptionsItemData provide label, children, and span. Span defaults to 1 and is clamped to column.
Usage notes
- In bordered mode, spans should fill each row's
columncount or gaps remain. Let long fields occupy a complete row. itemstakes precedence when supplied together withDescriptionsItemchildren.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Descriptions>
<DescriptionsItem label="username">zhangsan</DescriptionsItem>
<DescriptionsItem label="Address" span={3}>...</DescriptionsItem>
</Descriptions>