Open in Playroom
  • 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.
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
Add a Badge alongside the label of the AccordionItem using the badge prop.
Open in Playroom
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
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