Descriptions

Display multiple read-only fields in groups.

When To Use#

Commonly displayed on the details page.

Examples

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

Simplest Usage.

expand codeexpand code
import React from 'react';
import { Descriptions } from 'antd';

const App: React.FC = () => (
  <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>
);

export default App;
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.

expand codeexpand code
import React from 'react';
import { Descriptions, Badge } from 'antd';

const App: React.FC = () => (
  <Descriptions title="User Info" bordered>
    <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
    <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
    <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
    <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
    <Descriptions.Item label="Usage Time" span={2}>
      2019-04-24 18:00:00
    </Descriptions.Item>
    <Descriptions.Item label="Status" span={3}>
      <Badge status="processing" text="Running" />
    </Descriptions.Item>
    <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
    <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
    <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
    <Descriptions.Item label="Config Info">
      Data disk type: MongoDB
      <br />
      Database version: 3.4
      <br />
      Package: dds.mongo.mid
      <br />
      Storage space: 10 GB
      <br />
      Replication factor: 3
      <br />
      Region: East China 1<br />
    </Descriptions.Item>
  </Descriptions>
);

export default App;


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.

expand codeexpand code
import React, { useState } from 'react';
import { Descriptions, Radio, Button } from 'antd';
import type { RadioChangeEvent } from 'antd';

const App: React.FC = () => {
  const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');

  const onChange = (e: RadioChangeEvent) => {
    console.log('size checked', e.target.value);
    setSize(e.target.value);
  };

  return (
    <div>
      <Radio.Group onChange={onChange} value={size}>
        <Radio value="default">default</Radio>
        <Radio value="middle">middle</Radio>
        <Radio value="small">small</Radio>
      </Radio.Group>
      <br />
      <br />
      <Descriptions
        bordered
        title="Custom Size"
        size={size}
        extra={<Button type="primary">Edit</Button>}
      >
        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
        <Descriptions.Item label="Config Info">
          Data disk type: MongoDB
          <br />
          Database version: 3.4
          <br />
          Package: dds.mongo.mid
          <br />
          Storage space: 10 GB
          <br />
          Replication factor: 3
          <br />
          Region: East China 1<br />
        </Descriptions.Item>
      </Descriptions>
      <br />
      <br />
      <Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}>
        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
      </Descriptions>
    </div>
  );
};

export default App;
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
Storage space: 10 GB
Replication factor: 3
Region: East China 1

Responsive configuration enables perfect presentation on small screen devices.

expand codeexpand code
import React from 'react';
import { Descriptions } from 'antd';

const App: React.FC = () => (
  <div>
    <Descriptions
      title="Responsive Descriptions"
      bordered
      column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
    >
      <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
      <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
      <Descriptions.Item label="time">18:00:00</Descriptions.Item>
      <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
      <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
      <Descriptions.Item label="Official">$60.00</Descriptions.Item>
      <Descriptions.Item label="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication factor: 3
        <br />
        Region: East China 1
      </Descriptions.Item>
    </Descriptions>
  </div>
);

export default App;
User Info
UserName
Telephone
Live
Zhou Maomao
1810000000
Hangzhou, Zhejiang
Address
Remark
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
empty

Simplest Usage.

expand codeexpand code
import React from 'react';
import { Descriptions } from 'antd';

const App: React.FC = () => (
  <Descriptions title="User Info" layout="vertical">
    <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="Address" span={2}>
      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
    </Descriptions.Item>
    <Descriptions.Item label="Remark">empty</Descriptions.Item>
  </Descriptions>
);

export default App;
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.

expand codeexpand code
import React from 'react';
import { Descriptions, Badge } from 'antd';

const App: React.FC = () => (
  <Descriptions title="User Info" layout="vertical" bordered>
    <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
    <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
    <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
    <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
    <Descriptions.Item label="Usage Time" span={2}>
      2019-04-24 18:00:00
    </Descriptions.Item>
    <Descriptions.Item label="Status" span={3}>
      <Badge status="processing" text="Running" />
    </Descriptions.Item>
    <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
    <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
    <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
    <Descriptions.Item label="Config Info">
      Data disk type: MongoDB
      <br />
      Database version: 3.4
      <br />
      Package: dds.mongo.mid
      <br />
      Storage space: 10 GB
      <br />
      Replication factor: 3
      <br />
      Region: East China 1<br />
    </Descriptions.Item>
  </Descriptions>
);

export default App;

API#

Descriptions#

PropertyDescriptionTypeDefaultVersion
borderedWhether to display the borderbooleanfalse
colonChange default props colon value of Descriptions.Itembooleantrue
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)number3
contentStyleCustomize content styleCSSProperties-4.10.0
extraThe action area of the description list, placed at the top-rightReactNode-4.5.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 includednumber1

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.