Skip to main content
Digitaltableteur

Design system components

SummaryList

Questions and their answers as a description list, one row per question with an optional action: for checking answers before submitting and for showing a submitted record.

Status: alpha. Group: display. Markdown version: /design-system/components/summary-list.md

When to use

Questions and their answers as a description list, one row per question with an optional action: for checking answers before submitting and for showing a submitted record.

When not to use

  • Do not squeeze answers into columns side by side; one row per question.
  • Do not use it for tables of several values per row.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

SummaryList props
PropTypeDefaultDescriptionRequired
rowsSummaryListRow[]noneRows in order.Yes
layout"auto" | "stacked"auto"auto" stacks the label above the value in narrow containers and puts them side by side once the list is wide enough (about 40rem).No
classNamestringnoneMerged onto the dl element.No

Variants

  • Available layouts: auto, stacked (default auto).

Invalid combinations

The contract records no invalid combinations.

Keyboard

SummaryList keyboard behaviour
KeyBehaviour
GeneralNot interactive itself; row actions are reached with Tab in reading order.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

SummaryList rules
LevelRuleHow it is checked
MUSTARIA: Renders a <dl>; each row is a <dt> label and a <dd> value, and an optional <dd> action.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Row actions should name what they change ("Change" plus a visually hidden label).Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTEvery documented keyboard interaction works as specified.Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.

Install and import

  • In-repo only. SummaryList is not exported from @digitaltableteur/react, so there is no public import path.
  • Alpha components are internal and never exported.

Links