Accordion Item
FreeAn expandable/collapsible section that reveals or hides content when its header is activated. Used in groups to organise large amounts of content into scannable sections — FAQs, settings categories, and navigation trees. Each item has an expand/collapse chevron indicator and supports smooth height animation. The trigger uses aria-expanded and aria-controls for full accessibility.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard accordion item with text header and chevron indicator. | Use for FAQ sections, settings groups, and any list of collapsible content blocks. |
| With Icon | Accordion item with a leading icon in the header for visual categorisation. | Use when each section represents a distinct category that benefits from an icon identifier. |
| Bordered | Accordion item with visible borders separating sections. | Use when multiple accordion items are stacked and need clear visual separation. |
Usage Guidelines
Use a native <button> element for the accordion trigger — never a <div> or <span>.
Nest more than two levels of accordions — the hierarchy becomes confusing.
Allow multiple items to be open simultaneously unless the context demands single-open.
Force single-open behaviour when users might need to compare sections.
Animate the expand/collapse transition for smooth visual feedback.
Hide critical content behind an accordion that users must find and open.
Show a clear visual indicator (chevron) of the expanded/collapsed state.
Use an accordion for a single collapsible section — use a Disclosure instead.
Code
<div class="lex-accordion">
<div class="lex-accordion-item">
<h3>
<button class="lex-accordion-item__trigger"
aria-expanded="true" aria-controls="accordion-panel-1">
....lex-accordion-item__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
...// Using Lexicon CSS classes with React
<Accordion>
<AccordionItem title="What is your refund policy?">
...Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-accordion-border | — | — | border |
| --lex-accordion-header-padding | — | — | padding |
| --lex-accordion-content-padding | — | — | padding |
| --lex-accordion-icon-size | — | — | size |
Accessibility
- The trigger must be a native <button> element wrapped in an appropriate heading level.
- Use aria-expanded="true" or "false" on the trigger to reflect the panel state.
- Use aria-controls on the trigger pointing to the panel id.
- The panel should have role="region" and aria-labelledby pointing to the trigger.
- Focus must return to the trigger on close.