SGDS Accordion Component Skill

<sgds-accordion> is a container for one or more <sgds-accordion-item> elements. Items can be opened and closed individually; setting allowMultiple lets multiple items stay open at once.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Multiple items open at once? → Add allowMultiple on <sgds-accordion>

Outlined border style? → variant="border" on <sgds-accordion>

Compact spacing? → density="compact" on <sgds-accordion>

Start an item open? → Add open on <sgds-accordion-item>