Descriptions

Display multiple read-only fields in a group.

Importimport { Descriptions } from "antd";

Docs

When To Use

Commonly displayed on the details page.

tsx

// 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. Indicates whether the colon after the label is displayed	boolean	true
column	The number of `DescriptionItems` in a row, could be an object (like `{ xs: 8, sm: 16, md: 24}`, but must have `bordered={true}`) or a number	number \| Record<Breakpoint, number>	3
~~contentStyle~~	Customize content style, Please use `styles={{ content: {} }}` instead	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, Please use `styles={{ label: {} }}` instead	-	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	-
classNames	Semantic DOM class	Record<SemanticDOM, string>	-	5.23.0
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-	5.23.0

DescriptionItem

Property	Description	Type	Default	Version
~~contentStyle~~	Customize content style, Please use `styles={{ content: {} }}` instead	CSSProperties	-	4.9.0
label	The description of the content	ReactNode	-
~~labelStyle~~	Customize label style, Please use `styles={{ label: {} }}` instead	CSSProperties	-	4.9.0
span	The number of columns included(`filled` Fill the remaining part of the current row)	number \| `filled` \| Screens	1	`screens: 5.9.0`, `filled: 5.22.0`

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.

Token Name	Description	Type	Default Value
colonMarginLeft	Left margin of colon	number	2
colonMarginRight	Right margin of colon	number	8
contentColor	Text color of content	string	rgba(0,0,0,0.88)
extraColor	Text color of extra area	string	rgba(0,0,0,0.88)
itemPaddingBottom	Bottom padding of item	number	16
itemPaddingEnd	End padding of item	number	16
labelBg	Background color of label	string	rgba(0,0,0,0.02)
labelColor	Text color of label	string	rgba(0,0,0,0.45)
titleColor	Text color of title	string	rgba(0,0,0,0.88)
titleMarginBottom	Bottom margin of title	number	20

Token Name

Description

Type

Default Value

colonMarginLeft

Left margin of colon

number

colonMarginRight

Right margin of colon

number

contentColor

Text color of content

string

rgba(0,0,0,0.88)

extraColor

Text color of extra area

string

rgba(0,0,0,0.88)

itemPaddingBottom

Bottom padding of item

number

itemPaddingEnd

End padding of item

number

labelBg

Background color of label

string

rgba(0,0,0,0.02)

labelColor

Text color of label

string

rgba(0,0,0,0.45)

titleColor

Text color of title

string

rgba(0,0,0,0.88)

titleMarginBottom

Bottom margin of title

number

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	Hardware Info	CPU: 6 Core 3.5 GHz Storage space: 10 GB Replication factor: 3 Region: East China 1

Ant Design

Descriptions

When To Use

Examples

API

Descriptions

DescriptionItem

Semantic DOM

Design Token

root

header

title

extra

label

content

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

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