BRAID
Braid Logo
 

Accordion

Open in Playroom

Alternatives

  • Disclosure — For a lighter visual treatment.
  • Tabs — For a horizontal selection of multiple content panels.
  • Dialog — For exposing a smaller amount of content in a modal.
  • Drawer — For exposing a larger amount of content in a modal.

Accessibility

Follows the WAI-ARIA Disclosure Pattern.

Customising the appearance

You can customise the size, tone and weight props, and optionally set the dividers prop to false.While we aim to provide sensible defaults, you can also provide a custom space value to adjust the spacing between items. Note that, to ensure adequate space for touch targets, the space prop only accepts values of “medium”, “large” and “xlarge”.
Open in Playroom

Badge support

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

Inserting an icon

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

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