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. Defaults to right. | "right" | "left" |
density | — | The vertical white-space in the header and details. Defaults to regular. | "regular" | "spacious" | "slim" |
weight | — | Weight will set the style of the header. Defaults to bold. | "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. Defaults to 2. titleHeadingLevel is not valid when using a custom header. | 2 | 3 | 4 | 5 | 6 |
icon | — | Icon to render in icon is not valid when using a custom header. | ComponentClass<IconProps, any> | FunctionComponent<IconProps> |
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 |
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 |