Get startedFoundationsComponentsTemplatesBlocksAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

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
Storybook
DesignUsageAccessibilityUpdates

Purpose

Hide supporting content

Show headings first, then let users expand the details they need.

Help users scan sections

Use clear headings so users can compare topics before opening a panel.

Keep details in context

Expanded content stays directly under its heading, so the relationship remains clear.

Anatomy

Accordion title Badge
Accordion content
 Second section
Accordion content
1

Title

2

Indicator (chevron)

3

Content panel (slot)

4

Divider

5

Leading icon (optional)

6

Badge (optional)

Configuration

Variant

Accordion variant controls whether the group is rendered as a plain list or with an enclosing border.

Application details
Review your saved application details.

Use the default variant when the accordion sits naturally in page content.

Density

Accordion density adjusts the spacing inside each item to suit compact or roomy layouts.

Default density
Use for most page layouts.

Use for most accordions.

Multiple open items

Use allowMultiple when users may need to compare content across more than one section.

Eligibility
Only one item remains open.
 Documents
Supporting details.

Use the default single-open behaviour when each item is read independently.

Item state

Accordion items can be opened by default or disabled when a section is not available.

Open item
This panel is expanded by default.

Use an open item when one section needs to be surfaced immediately.

Icon and badge

Accordion items support icon and badge slots for compact status or category cues.

Application status Ready
The status badge stays close to the section label.

Use icon and badge slots only when they add useful recognition or status.

Structure

Accordion title
Accordion content

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedGapsgds-gap-md16pxSpacing between items inside the accordionBordersgds-border-width-11pxThickness of the border around the accordionsgds-border-radius-md8pxCorner radius of the accordionBackgroundsgds-bg-transparentTransparentUsed by the background colourColoursgds-color-default#1A1A1AText colour of the leading iconPaddingsgds-padding-lg20pxSpace between the left and right edges of the component and its contentsgds-padding-lg20pxSpace between the top and bottom edges of the component and its contentsgds-padding-xs4pxTop padding of the accordionsgds-padding-md16pxBottom padding of the accordionsgds-padding-md16pxLeft and right padding of accordion contentTypographysgds-font-size-body-md—Font size inherited by the accordion hostsgds-font-size-subtitle-md—Font size of default accordion heading textsgds-font-weight-semibold—Font weight of the accordion headingsgds-letter-spacing-tight—Letter spacing of the accordion headingsgds-line-height-xsHeight variesLine height of default accordion textOutlinesgds-outline-focus—Focus outline of the accordion headersgds-outline-offset-focus—Focus outline offset of the accordion header

Usage

When 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.

Best practices

What is your return policy?
Accordion content
Use sentence case

This keeps titles scannable.

WHAT IS YOUR RETURN POLICY?
Accordion content
Avoid all caps or mixed case

Inconsistent casing slows scanning.

Application eligibility
Accordion content
 Required documents
Accordion content
Keep titles to one sentence

Short titles are easier to read at a glance.

This is a very long accordion title that makes the list harder to scan and understand quickly
Accordion content
Do not use long titles

Move supporting detail into the panel content.

What is your return policy?
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.

What is your return policy?
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.

Payment details
Accordion content
 Supporting information
Accordion content
 Declarations
Accordion content
Group related items

Use accordions for content that belongs together.

Parent accordion
Nested accordion
Nested content
Do not nest accordions

Multiple layers make navigation harder.

Accessibility considerations

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.

Keyboard interaction

KeyInteractionTabMoves focus to the next accordion header or interactive element in the expanded content.Shift+TabMoves focus to the previous interactive element.EnterExpands or collapses the focused accordion header.SpaceExpands or collapses the focused accordion header.↓ Downor→ RightOpens the focused accordion header.↑ Upor← LeftCloses the focused accordion header.

Updates

DateVersionDescription04 May 2026v3.18.1Ui discrepancy in #634.17 Apr 2026v3.17.0New spacious density, responsive typography, badge and icon slots in #591.23 Mar 2026v3.15.0Slot modifications should happen at slotchange in #572.

Roadmap

Planned itemStatusTargetMigrate component to new motion tokensIn progressNov 2025Add start/end slot flexibilityUnder reviewTBDImprove keyboard navigationPlannedQ1 2026

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/accordion

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2