---
id: summary-list
title: SummaryList
---

# SummaryList

Use the summary list to summarize information, for example, a user’s responses at the end of a form.

## How to use

<code src="@digigov/ui/src/content/SummaryList/__stories__/Default.tsx" />

### With actions

Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do.
To give more context, add visually hidden text to the links.
This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.

<code src="@digigov/ui/src/content/SummaryList/__stories__/WithActions.tsx" />

### Without borders

If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.

<code src="@digigov/ui/src/content/SummaryList/__stories__/WithoutBorders.tsx" />

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={
  ["SummaryList",
  "SummaryListItem",
  "SummaryListItemAction",
  "SummaryListItemKey",
  "SummaryListItemValue"
  ]
} />