DescriptionList

When to useLink to "When to use"

• Read-only facts with labels: a profile, an order, a file's metadata, a review step before submitting.

Use something else when:

• the values can be edited in place: form fields (TextField, Field)
• there are many records with the same fields: a table

UsageLink to "Usage"

import { DescriptionList } from "@arshad-shah/cynosure";

<DescriptionList
  items={[
    { term: "Name", detail: user.name },
    { term: "Teams", detail: user.teams },
  ]}
/>

A detail can be any content, or an array for a term with several values. Give each item an id when its term is not a string.

LayoutLink to "Layout"

With layout="auto" (the default) terms sit beside their details while the list is at least 28rem wide and move above them when it is narrower. It follows the list's own width, so a list in a side panel stacks even on a wide screen. Fix it with layout="inline" or layout="stacked".

Inline terms share one column that grows to the widest term, up to 40% of the list; longer terms wrap.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Semantics: a native <dl> with <dt> terms and <dd> details, grouped per row.
• Contrast: terms use the muted colour and details the ink colour, both at least 4.5:1 in light and dark modes.
• Direction: the term column is on the right in right-to-left text.
• Touch and keyboard: nothing to press; links or buttons inside details behave as usual.

ThemingLink to "Theming"

Tokens: --cy-description-list-term-width, --cy-description-list-column-gap and --cy-description-list-row-gap.

createTheme({ components: { descriptionList: { termWidth: "12rem" } } });

RelatedLink to "Related"

Card · Badge · Grid