Descriptions

Display multiple read-only fields in a group.
Importimport{ Descriptions }from"antd";

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

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

Simplest Usage.

codepen icon
External Link Icon
expand codeexpand code
User Info
ProductCloud DatabaseBilling ModePrepaidAutomatic RenewalYES
Order time2018-04-24 18:00:00Usage Time2019-04-24 18:00:00
StatusRunning
Negotiated Amount$80.00Discount$20.00Official Receipts$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication factor: 3
Region: East China 1

Descriptions with border and background color.

codepen icon
External Link Icon
expand codeexpand code


Custom Size
ProductCloud DatabaseBillingPrepaidTime18:00:00
Amount$80.00Discount$20.00Official$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication factor: 3
Region: East China 1


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

Custom sizes to fit in a variety of containers.

codepen icon
External Link Icon
expand codeexpand code
Responsive Descriptions
ProductCloud DatabaseBillingPrepaidTime18:00:00
Amount$80.00Discount$20.00Official$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Hardware InfoCPU: 6 Core 3.5 GHz
Storage space: 10 GB
Replication factor: 3
Region: East China 1

Responsive configuration enables perfect presentation on small screen devices.

codepen icon
External Link Icon
expand codeexpand code
User Info
UserName
Telephone
Live
Zhou Maomao
1810000000
Hangzhou, Zhejiang
Address
Remark
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
empty

Simplest Usage.

codepen icon
External Link Icon
expand codeexpand code
User Info
ProductBilling ModeAutomatic Renewal
Cloud DatabasePrepaidYES
Order timeUsage Time
2018-04-24 18:00:002019-04-24 18:00:00
Status
Running
Negotiated AmountDiscountOfficial Receipts
$80.00$20.00$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

Descriptions with border and background color.

codepen icon
External Link Icon
expand codeexpand code

API

Common props ref:Common props

Descriptions

PropertyDescriptionTypeDefaultVersion
borderedWhether to display the borderbooleanfalse
colonChange default props colon value of Descriptions.Item. Indicates whether the colon after the label is displayedbooleantrue
columnThe 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
contentStyleCustomize content styleCSSProperties-4.10.0
extraThe action area of the description list, placed at the top-rightReactNode-4.5.0
itemsDescribe the contents of the list itemDescriptionsItem[]-5.8.0
labelStyleCustomize label styleCSSProperties-4.10.0
layoutDefine description layouthorizontal | verticalhorizontal
sizeSet the size of the list. Can be set to middle,small, or not filleddefault | middle | small-
titleThe title of the description list, placed at the topReactNode-

DescriptionItem

PropertyDescriptionTypeDefaultVersion
contentStyleCustomize content styleCSSProperties-4.9.0
labelThe description of the contentReactNode-
labelStyleCustomize label styleCSSProperties-4.9.0
spanThe number of columns includednumber | Screens1screens: 5.9.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.

Design Token

Component TokenHow to use?

Token NameDescriptionTypeDefault Value
colonMarginLeftLeft margin of colonnumber2
colonMarginRightRight margin of colonnumber8
contentColorText color of contentstringrgba(0, 0, 0, 0.88)
extraColorText color of extra areastringrgba(0, 0, 0, 0.88)
itemPaddingBottomBottom padding of itemnumber16
itemPaddingEndEnd padding of itemnumber16
labelBgBackground color of labelstringrgba(0, 0, 0, 0.02)
titleColorText color of titlestringrgba(0, 0, 0, 0.88)
titleMarginBottomBottom margin of titlenumber20

Global TokenHow to use?