@eds/accordion
v4.0.13
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" |
expanded | — | When set to true the children and header will be visible. When set to false, only the header will be visible. | boolean |
weight | — | Weight will set the style of the header. Defaults to bold. | "bold" | "subtle" |
title | — | The title text rendered with default styles. | string |
titleHeadingLevel | — | The semantic heading level for the title. Defaults to 2. | 2 | 3 | 4 | 5 | 6 |
customHeader | — | Override the default header styles with a custom header component. | ComponentClass<boolean | ReactChild | ReactPortal | StrictReactFragment, any> | FunctionComponent<boolean | ReactChild | ReactPortal | StrictReactFragment> |
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 |