Descriptions

Display multiple read-only fields in groups.

When To Use

Commonly displayed on the details page.

// works when >= 5.8.0, recommended ✅

const items: DescriptionsProps['items'] = [
  {
    key: '1',
    label: 'UserName',
    children: <p>Zhou Maomao</p>,
  },
  {
    key: '2',
    label: 'Telephone',
    children: <p>1810000000</p>,
  },
  {
    key: '3',
    label: 'Live',
    children: <p>Hangzhou, Zhejiang</p>,
  },
  {
    key: '4',
    label: 'Remark',
    children: <p>empty</p>,
  },
  {
    key: '5',
    label: 'Address',
    children: <p>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</p>,
  },
];

<Descriptions title="User Info" items={items} />;

// works when <5.8.0 , deprecated when >=5.8.0 🙅🏻‍♀️

<Descriptions title="User Info">
  <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
  <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
  <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
  <Descriptions.Item label="Remark">empty</Descriptions.Item>
  <Descriptions.Item label="Address">
    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  </Descriptions.Item>
</Descriptions>;

Examples

Basic

Simplest Usage.

border

Descriptions with border and background color.

Custom size

Custom sizes to fit in a variety of containers.

responsive

Responsive configuration enables perfect presentation on small screen devices.

Vertical

Simplest Usage.

Vertical border

Descriptions with border and background color.

API

Common props ref：Common props

Descriptions

Property	Description	Type	Default	Version
bordered	Whether to display the border	boolean	false
colon	Change default props `colon` value of Descriptions.Item	boolean	true
column	The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect)	number \| Record<Breakpoint, number>	3
contentStyle	Customize content style	CSSProperties	-	4.10.0
extra	The action area of the description list, placed at the top-right	ReactNode	-	4.5.0
items	Describe the contents of the list item	DescriptionsItem[]	-	5.8.0
labelStyle	Customize label style	CSSProperties	-	4.10.0
layout	Define description layout	`horizontal` \| `vertical`	`horizontal`
size	Set the size of the list. Can be set to `middle`,`small`, or not filled	`default` \| `middle` \| `small`	-
title	The title of the description list, placed at the top	ReactNode	-

DescriptionItem

Property	Description	Type	Default	Version
contentStyle	Customize content style	CSSProperties	-	4.9.0
label	The description of the content	ReactNode	-
labelStyle	Customize label style	CSSProperties	-	4.9.0
span	The number of columns included	number	1

The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both style and labelStyle(or contentStyle) configured, both of them will work. And next one will overwrite first when conflict.

Design Token

Component Token

Global Token

When To Use

Commonly displayed on the details page.

// works when >= 5.8.0, recommended ✅

const items: DescriptionsProps['items'] = [
  {
    key: '1',
    label: 'UserName',
    children: <p>Zhou Maomao</p>,
  },
  {
    key: '2',
    label: 'Telephone',
    children: <p>1810000000</p>,
  },
  {
    key: '3',
    label: 'Live',
    children: <p>Hangzhou, Zhejiang</p>,
  },
  {
    key: '4',
    label: 'Remark',
    children: <p>empty</p>,
  },
  {
    key: '5',
    label: 'Address',
    children: <p>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</p>,
  },
];

<Descriptions title="User Info" items={items} />;

// works when <5.8.0 , deprecated when >=5.8.0 🙅🏻‍♀️

<Descriptions title="User Info">
  <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
  <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
  <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
  <Descriptions.Item label="Remark">empty</Descriptions.Item>
  <Descriptions.Item label="Address">
    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  </Descriptions.Item>
</Descriptions>;

API

Common props ref：Common props

Descriptions

Property	Description	Type	Default	Version
bordered	Whether to display the border	boolean	false
colon	Change default props `colon` value of Descriptions.Item	boolean	true
column	The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect)	number \| Record<Breakpoint, number>	3
contentStyle	Customize content style	CSSProperties	-	4.10.0
extra	The action area of the description list, placed at the top-right	ReactNode	-	4.5.0
items	Describe the contents of the list item	DescriptionsItem[]	-	5.8.0
labelStyle	Customize label style	CSSProperties	-	4.10.0
layout	Define description layout	`horizontal` \| `vertical`	`horizontal`
size	Set the size of the list. Can be set to `middle`,`small`, or not filled	`default` \| `middle` \| `small`	-
title	The title of the description list, placed at the top	ReactNode	-

DescriptionItem

Property	Description	Type	Default	Version
contentStyle	Customize content style	CSSProperties	-	4.9.0
label	The description of the content	ReactNode	-
labelStyle	Customize label style	CSSProperties	-	4.9.0
span	The number of columns included	number	1

The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both style and labelStyle(or contentStyle) configured, both of them will work. And next one will overwrite first when conflict.

UserNameZhou Maomao	Telephone1810000000	LiveHangzhou, Zhejiang
Remarkempty	AddressNo. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

Product	Cloud Database	Billing Mode	Prepaid	Automatic Renewal	YES
Order time	2018-04-24 18:00:00	Usage Time	2019-04-24 18:00:00
Status	Running
Negotiated Amount	$80.00	Discount	$20.00	Official Receipts	$60.00
Config Info	Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1

Product	Cloud Database	Billing	Prepaid	Time	18:00:00
Amount	$80.00	Discount	$20.00	Official	$60.00
Config Info	Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1

ProductCloud Database	BillingPrepaid	Time18:00:00
Amount$80.00	Discount$20.00	Official$60.00

Product	Cloud Database	Billing	Prepaid	Time	18:00:00
Amount	$80.00	Discount	$20.00	Official	$60.00
Config Info	Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1

Namu Design

Descriptions

Namu Design

Descriptions

When To Use

Examples

API

Descriptions

DescriptionItem

Design Token

Component Token

Global Token

When To Use

Examples

API

Descriptions

DescriptionItem

Design Token

Component Token

Global Token

UserName	Telephone	Live
Zhou Maomao	1810000000	Hangzhou, Zhejiang
Address		Remark
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China		empty

DescriptionsChangelog

DescriptionsChangelog

When To Use

Examples

API

Descriptions

DescriptionItem

Design Token

Component Token

Global Token

When To Use

Examples

API

Descriptions

DescriptionItem

Design Token

Component Token

Global Token

Descriptions

Descriptions