Accordion

Accordions organize content into sections, putting the user in control of what information they want expanded and collapsed.

Overview

Resources

Install


yarn add @camp/accordion

Variations

Accordions are useful for exposing content to users in a progressive manner. Use accordions when the content that can be collapsed is supplementary to the primary content on the page, or when vertical space is limited and there’s a need to condense content.

Default Accordion

Use the default accordion wherever possible to expand and collapse content. The default accordion is used today throughout the platform on pages such as the Contact Details page. It’s also used on other Details pages, such as Accounts and Deals.


import Accordion from '@camp/accordion';
 
<Accordion title="Accordion Title">
  <Accordion.Item title="Item 1" panel="Panel content for item 1" />
  <Accordion.Item title="Item 2" panel="Panel content for item 2" defaultExpanded />
  <Accordion.Item title="Item 3" panel="Panel content for item 3" />
</Accordion>;

Side Panel Accordion

The side panel accordion uses appearance="aside" and is contained within a right sidebar. While the sidebar can vary in width, the side panel accordion always fills the width of the side panel.


import Accordion from '@camp/accordion';
 
<Accordion appearance="aside" title="Aside light">
  <Accordion.Item title="Section A" panel="Aside light panel content" defaultExpanded />
  <Accordion.Item title="Section B" panel="Second section" />
</Accordion>;

Borderless Accordion

The borderless accordion is reserved for when space is limited and uses borderless to remove all borders from the component.


import Accordion from '@camp/accordion';
 
<Accordion borderless>
  <Accordion.Item title="Item 1" panel="Panel content for item 1" />
  <Accordion.Item title="Item 2" panel="Panel content for item 2" defaultExpanded />
  <Accordion.Item title="Item 3" panel="Panel content for item 3" />
</Accordion>;

Exclusive Mode

When exclusive is set, only one accordion item can be expanded at a time. Expanding a new item automatically collapses the previously open one.


import Accordion from '@camp/accordion';
 
<Accordion exclusive title="Exclusive Accordion">
  <Accordion.Item title="Item 1" panel="Panel content for item 1" defaultExpanded />
  <Accordion.Item title="Item 2" panel="Panel content for item 2" />
  <Accordion.Item title="Item 3" panel="Panel content for item 3" />
</Accordion>;

Dark Theme

The dark theme is available for the aside appearance, suitable for dark-themed side panels.


import Accordion from '@camp/accordion';
 
<Accordion appearance="aside" theme="dark" title="Aside Navigation">
  <Accordion.Item title="Section 1" panel="Content for section 1" defaultExpanded />
  <Accordion.Item title="Section 2" panel="Content for section 2" />
</Accordion>;

All Variants

An overview of all accordion variants including main, borderless, and aside appearances.

Usage

Best Practices

Use accordions when the content that can be collapsed is supplementary to the primary content on the page
In most cases, the accordion’s expanded item content aligns to the label text of the accordion header
In a small accordion under 360px, the content left aligns to the expanded indicator icon
Accordion headers should be clearly written, in title case, and avoid punctuation at the end
Use exclusive mode when only one section should be visible at a time
Use borderless when space is limited and visual weight should be reduced

Content Guidelines

✅ DO

Use clear, concise titles for accordion items
Group related content within the same accordion
Use default appearance for most use cases
Use aside appearance only within sidebar panels

🚫 DON’T

Don’t nest accordions within other accordions
Don’t use accordions for primary content that users need to see immediately
Don’t use long titles that wrap to multiple lines
Don’t use dark theme outside of aside appearance

Accessibility

Keyboard Support

Move focus between accordion items using the tab key, or shift + tab to move backwards
When the accordion item is in focus, use space or enter to expand or collapse the accordion item
Interactive elements (such as a link or button) within an expanded accordion item integrate into the tab order by default
The expand/collapse button uses aria-label to indicate the current state (“Expand” or “Collapse”)