Progressive disclosure
Accordion sections show only essential information upfront and reveal supporting details on demand.
Accordion
The accordion is a UI component that lets users expand and collapse sections of content. It helps organise information into manageable chunks, keeping pages clean and reducing cognitive load.
GitHub
components/accordion
components/accordionStorybook
components/accordion
components/accordionScan and prioritise
Accordion headings help users compare sections quickly before deciding what to expand.
Maintain context
Expanded content stays grouped beneath its trigger so users can stay oriented while reading.
Accordion content
Accordion content
1
Title
2
Indicator (chevron)
3
Content panel (slot)
4
Divider
5
Leading icon (optional)
6
Badge (optional)
Density
Density controls the spacing and visual weight of accordion items.
Content of accordion item 1
Content of accordion item 2
Content of accordion item 3
Standard spacing for most page content. Use it in typical layouts.
Border
Border controls whether the accordion uses a borderless or bordered container.
Content of accordion item 1
Content of accordion item 2
Content of accordion item 3
No outer shell around the accordion. Use it when the surrounding layout already provides structure.
Expansion
Expansion controls how many accordion items can stay open at the same time.
Content of accordion item 1
Content of accordion item 2
Content of accordion item 3
Keeps one section open at a time. Use it to keep the page compact and focused.
Slots
Slots control the optional content added to the accordion header.
Content of accordion item 1
Content of accordion item 2
Content of accordion item 3
Uses the standard header only. Use it for most content lists.
Content of accordion item 1
Content of accordion item 2
Content of accordion item 3
Accordion content
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: hover-bg under sgds/accordion means sgds/accordion/hover-bg.
sgds/accordion
sgds/bg-translucent-subtlesgds/color-defaultsgds/color-subtlesgds/gap/mdsgds/border-color-mutedsgds/border-width/1sgds/border-radius/mdsgds/accordion/default
sgds/padding/lgsgds/padding/lgsgds/padding/xssgds/padding/lgsgds/accordion/compact
sgds/padding/mdsgds/padding/mdsgds/padding/xssgds/padding/mdsgds/accordion/spacious
sgds/padding/xlsgds/padding/xlsgds/padding/xssgds/padding/xlSemantic tokens
sgds/bg-transparentsgds/color-defaultWhen to use
- Use to group related information.
- Use to reduce scrolling when content does not need to be shown at once.
- Use when space is limited, such as on mobile or in side panels.
When not to use
- Do not use when each section is short enough to show directly.
- Do not hide essential information inside an accordion.
Accordion content
Use sentence case
This keeps titles easy to scan.
Accordion content
Avoid all caps or mixed case
Inconsistent casing slows scanning.
Accordion content
Accordion content
Keep titles to one sentence
Short titles are easier to read at a glance.
Accordion content
Do not use long titles
Move supporting detail into the panel content.
Our return policy allows you to return items within 30 days of purchase for a full refund, provided they are unused and in their original packaging.
Match content to the title
Users should get what the heading promises.
Our store accepts a variety of payment methods, including major credit cards like Visa and MasterCard, as well as digital wallets such as PayPal and Apple Pay.
Avoid unrelated content
Off-topic panel content creates confusion.
Accordion content
Accordion content
Accordion content
Group related items
Use accordions for content that belongs together.
Nested content
Do not nest accordions
Multiple layers make navigation harder.
Built-in accessibility
Each accordion trigger is a real button with expanded or collapsed state.
The component applies built-in ARIA attributes to connect the trigger with its content region.
- Use the built-in accordion item instead of recreating the trigger and panel behaviour with custom markup.
- The trigger exposes its expanded state and references the content it controls.
- The panel content is exposed as a region, so use accordions for grouped sections rather than for every small detail on a page.
Labels and content
The header slot content becomes the visible label for the accordion trigger.
Write header text that is clear enough to stand on its own when announced as a button.
- Use short, specific titles that describe the content inside each panel.
- If the accordion sits under a page heading structure, apply heading markup around it consistently in the surrounding page content.
Focus and interaction
Interaction stays on a real button, with keyboard movement into interactive content inside an expanded panel.
- After opening a panel, users should be able to continue tabbing into links, buttons, and form fields in a logical order.
- Do not place essential actions in collapsed content if users need to reach them immediately.
TabShift+TabEnterSpace↓ Downor→ Right↑ Upor← LeftHave suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.