Accordion
An interactive heading that reveals an associated section of content.The <Accordion /> component allows a user to gain a quick overview of information via the header, which they can click to expand or collapse the additional details beneath.
It is important to consider the heading structure of your whole page when adding an <Accordion /> or <AccordionGroup />. The heading in your accordion should fall logically within the page's heading hierarchy to help assistive technology users navigate the page. By default, the titleHeadingLevel prop is set to 2, rendering a <h2> as the HTML element for the heading with the style of a <h6>. You can adjust this level via the titleHeadingLevel prop by setting it to 2, 3, 4, 5 or 6. NOTE: This won't change the styles, just the HTML element.
By default, the accordion is collapsed but can be expanded on load by passing the expanded prop with the value of true.
There are two options for weight: bold (default) and subtle. It's best to keep weights the same across each Accordion in the same group. This provides consistency and the best user experience.
The bold weight is best for pages with ample space and at large screen sizes.
subtle weight is best used when space is constricted, e.g. in a card, tile, modal or side panel.
Spacing around the title text and details can be controlled by the density prop. Consistency across each Accordion in a group is important for readability, as with the weight.
By default the expand indicator (chevron) is placed on the right side of the header. The alignExpandIndicator prop allows for the title on the left side to vertically align with other element titles in the layout. Aligning the indicator to the left can be useful in large layouts where it may get overlooked, given the distance the user's eye needs to travel.
By default, the accordion panel has horizontal and vertical padding applied. The noPanelPadding prop allows you to remove this padding when you need full-width content or custom spacing.
The items prop allows you to add interactive or static content to the end of the accordion header. It accepts an array of objects, each specifying the type of element to display and its associated properties.
The titleItem prop allows you to add supplementary content next to the accordion's title, such as a Tag, Badge, NumberBadge, or Text component. Only one titleItem can be shown per accordion header.
The customHeader prop has been deprecated and will be removed in the next major version. Instead, use the titleItem or items prop for a structured and accessible way to add interactive or static content to the accordion header.
Previously, the customHeader prop accepted a function that returned a custom component. This was primarily used to add action buttons to the accordion header.
Now, instead of providing a function, pass an object to the titleItem prop and an array to the items prop.
To consistently group a set of accordions, you can use the <AccordionGroup /> component. This will stack the accordions with consistent spacing. You can also make the group discoverable as a landmark by screen readers by passing in an ariaLabel. It's important to keep the density, weight and alignExpandIndicator values consistent across each accordion in the group.
The icon prop renders an icon to the left of the heading. It's always hidden on smaller screens to ensure enough space for important content.