Go to AntUIKit homepage

Descriptions

A read-only list of label and value pairs, laid out as a grid, for the detail view of one record.

Preview in FigmaLLMs

Usage

When to use Descriptions, what its props are for, and the choices it leaves to you.

When to use

Descriptions is the detail view of one record: a fixed set of label and value pairs, read only, laid out as a grid. It sits under a page title and says what the thing is.
  • A record's attributes on its own page: an order, a user, a server, an invoice.
  • A summary before a confirm step, showing back values entered somewhere else.
  • The head of a page whose body is a table of that record's children. The grid describes the parent, the table lists the rest.
Use something else when:
  • Table when there are many records. A stack of Descriptions, one per record, cannot be scanned down a column.
  • Form when the values are editable. Descriptions renders no inputs, so swap the whole block for a Form in edit mode instead of putting fields inside its cells.
  • A plain list when the rows have no labels. Every value having a name is what this component is for.

The items API

Use items. The <Descriptions.Item> children form still works, but items is the current API and maps straight from your data. Give every item a key.
  • items is an array, so you can build it with .map() and .filter() over a record's fields.
  • Without a key an item falls back to its array index, which breaks as soon as the list is filtered per record.
  • An item's children is its value, and it takes any node: a Tag, a link, a truncated paragraph.
  • Descriptions.Item is still exported so existing code compiles. New code passes items.

Column counts and span

Columns follow the screen width by default. Without column you get 1 column on phones, 2 from 576px, 3 from 768px and 4 from 1920px. Pass a number to fix the count, or a breakpoint object like { xs: 1, md: 2, xl: 4 } to set your own.
  • The breakpoints are Ant Design's. sm starts at 576px and lg at 992px, where Tailwind uses 640 and 1024. An item's span takes the same keys, so a long value can be two columns wide on lg and one on sm.
  • The last item in a short row stretches. Four items at column={3} leave one wide cell on the second row. Add an item or change column so the rows add up.
  • Spans have to add up to column. A numeric span that runs past the end of a row is cut to the space left and logs a warning in development. Set span="filled" to give an item the rest of its row, and put a wide responsive item first in the list.

Layout, frame and density

  • layout="horizontal" (the default) puts the label beside its value. layout="vertical" stacks it above, for values long enough that a label beside them wastes half the row, or values that are blocks of their own.
  • Pick one layout per surface. A vertical block next to a horizontal one reads as two different components.
  • bordered is a boolean. Descriptions has no variant prop, unlike Card and Input. The bordered form gives each label its own shaded cell and never shows a colon, so colon only changes the unbordered form.
  • Prefer bordered when the block is dense or the labels vary a lot in length.
  • Leave size unset for the large size. size="default" is deprecated and logs a warning. Use small inside a card or a side panel.

Labels and empty values

  • Keep labels short and parallel, nouns of about the same length that read down a column: “Created, Updated, Owner” rather than “Created at, When it changed, Owned by”.
  • colon adds a colon after each label and defaults to true. It has no effect on a bordered block.
  • Write the empty value out. An item whose children is null renders a blank cell, which reads as data that failed to load. Show None or Not set instead, and use the same word across the surface.
  • Keep the item rather than dropping it. With more than one column, removing a pair moves every pair after it, so two records of the same kind stop lining up.

Title, extra and restyling

  • title is the block's heading and extra sits at the end of the same row. Leave both unset, rather than passing an empty string, when you want no header.
  • Inside a Card, let the Card carry the heading. Two stacked headings make the block noisy.
  • Use extra for the one action the block offers, like an Edit button or a status Tag.
  • Style parts with styles. labelStyle and contentStyle are deprecated. Use styles.label and styles.content, or the same keys on classNames.
  • The root takes root, header, title, extra, label and content, and an item takes label and content. Use these keys before a descendant selector.
DatepickerDivider
© 2026 AntUIKit . All rights reserved.