Accordion
An interactive heading that reveals an associated section of content.Prop | Required | Description | Type |
|---|---|---|---|
children | ✅ | The details that get revealed below the header. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
alignExpandIndicator | — | Align the chevron expand indicator. | "right" | "left" |
density | — | The vertical white-space in the header and details. | "regular" | "spacious" | "slim" |
noPanelPadding | — | Remove padding from the accordion panel. | boolean |
weight | — | Weight will set the style of the header. | "bold" | "subtle" |
items | — | Optional items displayed in the accordion header. | AccordionItem[] |
title | — | The title text rendered with default styles. title is not valid when using a custom header. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
titleHeadingLevel | — | The semantic heading level for the title. titleHeadingLevel is not valid when using a custom header. | 2 | 3 | 4 | 5 | 6 |
icon | — | Icon to render in the header. icon is not valid when using a custom header. | ComponentClass<IconProps, any> | FunctionComponent<IconProps> |
titleItem | — | Title item to render next to the header | TagItem | BadgeItem | NumberBadgeItem | TextItem |
customHeader | — | @deprecated customHeader is not valid when using a title-based header. @deprecated Override the default header styles with a custom header component. | ComponentClass<boolean | ReactChild | ReactPortal | StrictReactFragment, any> | FunctionComponent<boolean | ReactChild | ReactPortal | StrictReactFragment> |
expanded | — | The initial expanded state of the accordion. When set to true, the children and header will be visible. When set to false, only the header will be visible. This prop does not control the component after mounting. | boolean |
stickyHeader | — | Whether the header should stick to the top of its container while scrolling. | boolean |
Prop | Required | Description | Type |
|---|---|---|---|
children | ✅ | The Accordions for the group. | ReactElement<AccordionProps, string | JSXElementConstructor<any>>[] |
weight | ✅ | Match the weight of the Accordion children to enable the optimum vertical gap. | "bold" | "subtle" |
ariaLabel | — | The accessible label for the group. Defining a label sets the group as a section element. | string |