Summary list
Summary list is used to summarise information such as a user’s responses at the end of a form.
import { ... } from '@ag.ds-next/react/summary-list';
<Stack gap={1.5}> <SummaryList> <SummaryListItem> <SummaryListItemTerm>First name</SummaryListItemTerm> <SummaryListItemDescription>Will</SummaryListItemDescription> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Last name</SummaryListItemTerm> <SummaryListItemDescription>Power</SummaryListItemDescription> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Contact information</SummaryListItemTerm> <SummaryListItemDescription> +61 9912 3456 <br /> will.power@example.com </SummaryListItemDescription> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Date of birth</SummaryListItemTerm> <SummaryListItemDescription>09/06/1995</SummaryListItemDescription> </SummaryListItem> </SummaryList> <TextLink href="#">Change all</TextLink> </Stack>
SummaryList displays a list of terms and descriptions as key value pairs. It is similar to a two-column table, but renders a HTML Description List (<dl>
) element.
Common uses for this component are to implement a glossary or to display metadata.
Do
- categorise information into logical sections
- where appropriate, include a Change all button below a list rather than below individual items.
Don’t
- use to compare multiple items or tabular data – use Table
- include images and diagram
- create lengthy summaries – break information into smaller categories.
Actions
You can add actions to the end of a SummaryList by nesting <SummaryListItemAction>
s and interactive components such as <TextLink>
.
Ensure each action’s accessible label is unique for screen reader users by including <VisuallyHidden>
text that matches the <SummaryListItemTerm>
’s content.
<SummaryList> <SummaryListItem> <SummaryListItemTerm>First name</SummaryListItemTerm> <SummaryListItemDescription>Will</SummaryListItemDescription> <SummaryListItemAction> <TextLink href="#"> Change <VisuallyHidden>first name</VisuallyHidden> </TextLink> </SummaryListItemAction> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Last name</SummaryListItemTerm> <SummaryListItemDescription>Power</SummaryListItemDescription> <SummaryListItemAction> <TextLink href="#"> Change <VisuallyHidden>last name</VisuallyHidden> </TextLink> </SummaryListItemAction> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Contact information</SummaryListItemTerm> <SummaryListItemDescription> +61 9912 3456 <br /> will.power@example.com </SummaryListItemDescription> <SummaryListItemAction> <TextLink href="#"> Change <VisuallyHidden>contact information</VisuallyHidden> </TextLink> </SummaryListItemAction> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Date of birth</SummaryListItemTerm> <SummaryListItemDescription>09/06/1995</SummaryListItemDescription> <SummaryListItemAction> <TextLink href="#"> Change <VisuallyHidden>date of birth</VisuallyHidden> </TextLink> </SummaryListItemAction> </SummaryListItem> </SummaryList>
Related components
- Table – Tables help make complex information easier to scan and compare. Use tables for exact values or information that would be hard to read in body text.