Skip to main content
On this page

Summary List

Display labelled data for users to review.

When to use​

  • On a review or confirmation page to show what a user has entered before submitting
  • To display the key attributes of a single entity, for example an account's name, address, and tariff
  • Anywhere a set of labelled values needs to be presented in a structured, readable format

When not to use​

  • To compare data across multiple entities - use Data Table instead. Summary List is for a single entity's attributes, not a grid of items.
  • For a plain list of items without labels - use List instead.
  • For a small number of inline key-value pairs within body copy - use plain text instead to avoid adding structural overhead to simple content.

Anatomy​

  1. Label
  2. Value

Basic usage​

Loading...
Edit live code
<SummaryList>
  <SummaryItem label="Name">David Attenborough</SummaryItem>
  <SummaryItem label="Age">94</SummaryItem>
</SummaryList>

Variants and features​

Rich values​

Values can contain any React content, including formatted numbers, Badges, Text Links, or other inline components.

Loading...
Edit live code
<SummaryList>
  <SummaryItem label="Account">A-001234</SummaryItem>
  <SummaryItem label="Status"><Badge variant="success">Active</Badge></SummaryItem>
  <SummaryItem label="Supply address">
    1 Example Street, London, EC1A 1BB
  </SummaryItem>
</SummaryList>

Content​

Labels​

Labels identify what the value represents. Keep them short and noun-based, for example "Name", "Date of birth", "Account number". Avoid full sentences or questions as labels.

Values​

Values should be unambiguous. For empty or inapplicable values, use a short descriptive phrase such as "None" or "Not applicable" rather than leaving the space blank. This makes it clear the absence of a value is intentional.

Action links​

When a value row includes an action link such as "Change" on a review page, include context about what is being changed in the link text. The simplest way to do this is to add a <VisuallyHidden> span with the label name, for example:

Loading...
Edit live code
<SummaryList>
  <SummaryItem label="Name">
    David Attenborough
    <TextLink href="/change/name">
      Change <VisuallyHidden>name</VisuallyHidden>
    </TextLink>
  </SummaryItem>
  <SummaryItem label="Date of birth">
    8 May 1926
    <TextLink href="/change/date-of-birth">
      Change <VisuallyHidden>date of birth</VisuallyHidden>
    </TextLink>
  </SummaryItem>
</SummaryList>

This gives screen reader users "Change name" rather than hearing the word "Change" repeated for every row without context.