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.

Tailoring the appearance

You can specify the size, tone and weight props, and optionally set the dividers prop to false.You may also provide a space value to adjust the spacing between items. Note that in order to ensure adequate space for touch targets, the space prop only accepts values of medium, large and xlarge.
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

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

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

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.

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.