BRAID
Braid Logo
 

Accordion

A vertically stacked list of panels that expand and collapse to reveal sections of content.
Open in Playroom

Accessibility

Follows the WAI-ARIA Disclosure Pattern.

Appearance

Visual prominence

You can specify the size, tone and weight props, and optionally set the dividers prop to false.
Open in Playroom
Deprecated

Space, deprecated

The space prop is deprecated. Spacing between items is now automatically derived from the size prop and will be removed in a future release.
Open in Playroom

Badges

Add an optional Badge alongside the label of the AccordionItem using the badge prop.
Open in Playroom

Icons

For decoration or help distinguishing between accordion items, an icon can be provided. This will be placed to the left of the label.
Open in Playroom

Interaction

Managing state

An AccordionItem, by default, manages its own state internally. If you’d like to take control of the state, you can do so using the expanded and onToggle props.
Open in Playroom

Best practices

Content guidelines

  • Avoid putting critical or high-priority content in an accordion, as users may not read it.
  • Label your accordion items appropriately to help users decide which sections to read.

When to use

Use an Accordion:
  • to shorten pages and reduce scrolling when content isn’t crucial to read in full (e.g. FYIs)
  • to display basic content such as text, links and occasional images.
Don’t use an Accordion:
  • if the information is needed for the user to complete their current task (make it visible upfront instead)
  • to capture complex user input, such as in a form (consider using a Drawer instead)
  • for a single section of content (consider using a Disclosure instead).

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Accordion
  data={{ testid: 'accordion-1' }}
  // => data-testid="accordion-1"
>
  <AccordionItem
    data={{ testid: 'accordion-item-1' }}
    // => data-testid="accordion-item-1"
  >
    ...
  </AccordionItem>
</Accordion>
Open in Playroom

Alternatives

  • Dialog — For exposing additional content in a modal with rich formatting.
  • Disclosure — For revealing optional content inline with a light visual treatment.
  • Tabs — For presenting multiple sections of content in horizontal panels.
On this page