Skip to main content
Version: v9.1.0

ontario-summary-list

Use a summary list to group labelled answers for review before a user submits or confirms their information.

Usage guidance​

Please refer to the Ontario Design System for current documentation guidance for summary lists.

Configuration​

After installing the component package, add the summary list directly to your project and configure it using the properties below.

ontario-summary-list provides the structural shell for the summary list and row content is supplied through the default slot, typically using ontario-summary-list-item children.

For a section-level change link, either:

  • pass captionActionLink and let the component generate the visible label and screen-reader text, or
  • use the caption-action slot when a router-aware link is required, such as Next.js Link or Angular routerLink.

Examples​

Minimal captionActionLink usage. Passing only href uses the default localized link label and auto-generated screen-reader text.

<ontario-summary-list caption="Contact details" heading-level="h3" caption-action-link='{"href":"/step/contact"}'>
	<ontario-summary-list-item name="Email" description="gsmith@gmail.com"></ontario-summary-list-item>
	<ontario-summary-list-item name="Phone number" description="123-456-7890"></ontario-summary-list-item>
</ontario-summary-list>

Full captionActionLink usage. Passing { href, label } overrides the visible text; the component still auto-generates localized screen-reader text from caption.

<ontario-summary-list
	caption="Personal information"
	heading-level="h3"
	caption-action-link='{"href":"/step/personal-info","label":"Update"}'
>
	<ontario-summary-list-item name="Last name" description="Smith"></ontario-summary-list-item>
	<ontario-summary-list-item name="First name" description="George"></ontario-summary-list-item>
</ontario-summary-list>

Slot override pattern. Use the caption-action slot when a router-aware link is required. Supply screen-reader text manually inside the slotted element.

<OntarioSummaryList caption="Contact details" headingLevel="h3">
	<Link slot="caption-action" href="/step/contact">
		Change
		<span className="ontario-show-for-sr">
			your answer for: <q>Contact details</q>
		</span>
	</Link>
	<OntarioSummaryListItem name="Email" description="gsmith@gmail.com" />
	<OntarioSummaryListItem name="Phone number" description="123-456-7890" />
</OntarioSummaryList>

Row-level action links are consumer-authored through slotted children. Each ontario-summary-list-item accepts its own action slot.

<ontario-summary-list caption="Personal information" heading-level="h3">
	<ontario-summary-list-item name="Last name" description="Smith">
		<a slot="action" href="/step/personal-info">
			Change
			<span class="ontario-show-for-sr">your answer for: <q>Last name</q></span>
		</a>
	</ontario-summary-list-item>
	<ontario-summary-list-item name="First name" description="George">
		<a slot="action" href="/step/personal-info">
			Change
			<span class="ontario-show-for-sr">your answer for: <q>First name</q></span>
		</a>
	</ontario-summary-list-item>
</ontario-summary-list>

Custom property types​

Accepted as a JSON string (for plain HTML) or an object (for JSX/framework use).

caption-action-link='{ "href": "/step/contact" }'
PropertyDescriptionTypeRequired
hrefThe URL for the change link.stringYes
labelOverrides the visible link text. Defaults to the localized "Change" / "Modifier" label.stringNo

Technical Note: SSR (Server-Side Rendering) Considerations​

The Ontario Summary List component supports server-side rendering, with a few considerations:

  • Language prop: Pass language explicitly during SSR for deterministic localized output for the generated change link.
  • Slot precedence: The caption-action slot takes precedence over captionActionLink after hydration.
  • Hydrated-only language events: Language toggle events (setAppLanguage, headerLanguageToggled) only update the component after hydration.
  • Framework guidance: For deterministic SSR output, set language directly in markup (for example, <ontario-summary-list language="fr"></ontario-summary-list>).

Overview​

Ontario Summary List groups labelled answers for review before a user submits or confirms information.

For component guidance, see:

Properties​

PropertyAttributeDescriptionTypeDefault
caption (required)captionThe section heading text for this summary list group. This prop is required.stringundefined
captionActionLinkcaption-action-linkRenders a section-level change link in the heading row. Accepts a JSON string (for plain HTML) or an object (for JSX/framework use). The href property is required. An optional label overrides the visible link text; if omitted, the component uses the localized default ("Change" / "Modifier"). Screen-reader text is always auto-generated from caption. Use the caption-action slot instead when a router-aware link is needed.SummaryListActionLink | string | undefinedundefined
columnRatiocolumn-ratioAdjusts the flex ratio between the key and value columns. Recommended when questions are short. If omitted, columns share equal width."1-1" | "1-2" | "1-3" | "2-1" | "2-3" | undefinedundefined
fullWidthfull-widthWhen true, the summary list expands to the full available width. Recommended when the list contains text area responses.booleanfalse
headingLevelheading-levelThe heading element to use for the section caption. Defaults to h3. The heading level should match the document hierarchy of the consuming page."h2" | "h3" | "h4"'h3'
languagelanguageThe language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English."en" | "fr" | undefinedundefined

Built with StencilJS