Skip to content

Summary List

Summary List provides a summary of data, generally from a form.

Overview

Summary Lists display labelled data for users to review, for example on the summary page of a multi-step form. Summary Lists are a composition of Description list components.

Usage

Name
David Attenborough
Age
94

"The summary pages were good, they summarised everything you did. You’re moving from here to there and that way I could see what I had already filled in and if there were any errors I needed to fix."

Unmoderated usability testing with 5 participants looking at a prototype for a future move out and everyone saw the value in having a summary.

Move out UX design and research (opens in new window) 

Properties

SummaryItem

NameValuesDefault

label (required)

ReactNode

...Passed to data element

JSX.IntrinsicElements["dd"]