Descriptions

Label and value pairs laid out in one or more columns, with an optional header and bordered style.

import { Descriptions } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Display

Basic

Loading preview

APIs

Descriptions properties

bordered: boolean
Defaults to false.
classNames: { content?: string; label?: string; }
colon: boolean
Defaults to true.
column: number
Defaults to 1.
extra: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
itemsRequired: DescriptionsItem[]
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
styles: { content?: CSSProperties; label?: CSSProperties; }
title: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Also accepts all native HTML and ARIA attributes.

Renders a <dl> laid out with CSS grid: column repetitions of a label track and a content track. span stretches an item across that many label / content pairs, clamped to column.

Migrating from antd Descriptions

labelStyle → styles.label; classNames.label / classNames.content keep working.
size is removed; there is one compact density (antd small).
column defaults to 1 (antd defaults to 3).
The Descriptions.Item children form is not supported; pass items.
layout="vertical", responsive column objects and span: 'filled' are not supported.