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> |
defaultExpanded | — | The initial expanded state of the accordion (uncontrolled). 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 |
expanded | — | The controlled expanded state of the accordion. When provided, the accordion becomes controlled and you must update this value via the onExpandedChange callback to toggle the accordion state. | boolean |
onExpandedChange | — | Callback invoked when the accordion's expanded state changes. Used with the expanded prop to control the accordion state. Accepts a boolean value or a function that receives the previous state and returns the new state. | Dispatch<SetStateAction<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 |