Figma component link
Storybook component link
The Accordion component lets users show and hide sections of related content on a page, to simplify the interface where necessary.
Usage
Do’s
Use accordion when you have multiple related pieces of content.
Use accordion when only some of the content items are relevant to any one user. FAQs are a great example as not all questions are of interest to everyone.
Dont’s
Don’t use accordion when content is relevant to all users.
Don’t use accordion when content within the accordion is very complex or can cause slow page loads.
Anatomy
Insert image here
Item | Component type | Content type | Notes | |
|---|---|---|---|---|
1 | List item | Text | ||
2 | Item title | Text | ||
3 | Item content | RTA |
Visual style
n/a
Editorial
Keep accordion titles short, but long enough to clearly communicate what a user can expect to find inside. This is especially required for unsighted users.
Behaviour
Accordion items are collapsed by default.
Each accordion is individually controlled with a toggle between expanded and collapsed.
Each accordion includes hover, focus and disabled and active states. CSS ‘focus-visible’ will remove visual focus for mouse-controlled accordions.
Mouse click or touch on the accordion title will toggle between expand and collapse.
Once focused, Enter or Space on a keyboard will toggle expand or collapse.
Items within an accordion ‘list’ can be traverse forwards with tab and backwards with shift+tab.
Where Javascript is disabled, all accordions are expanded by default and expand/collapse controls are not present.
Accessibility
Related components
Disclosure
A very brief description
Table of Contents
A very brief description
Tabs
A very brief description