Accordion
Accordions are used to group similar content and hide or show it depending on user needs or preferences. Accordions give users more granular control over the interface and help digest content in stages, rather than all at once.
Name | Type | Description | Default |
---|---|---|---|
Required label | string | The panel label. | - |
defaultIsExpanded | boolean | Initial state of the panel, only when it is uncontrolled. | - |
isExpanded | boolean | Represents the state of the panel. When true, the component will be expanded. If undefined, the component will be uncontrolled and its value will be managed internally by the component. | - |
icon | string | (React.ReactNode & React.SVGProps <SVGSVGElement>) | Element or path used as the icon that will be placed next to panel label. | - |
assistiveText | string | Assistive text to be placed on the right side of the panel. | - |
disabled | boolean | If true, the component will be disabled. | false |
onChange | (isExpanded: boolean) => void | This function will be called when the user clicks the accordion to expand or collapse the panel. The new state of the panel will be passed as a parameter. | - |
Required children | React.ReactNode | The expanded panel of the accordion. This area can be used to render custom content. | - |
margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
tabIndex | number | Value of the tabindex attribute. | 0 |
Groups two or more accordions to distribute large volumes of information.
Name | Type | Description | Default |
---|---|---|---|
defaultIndexActive | number | Initially active accordion, only when it is uncontrolled. | - |
indexActive | number | The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component. If null, the component will be controlled and all accordions will be closed. | - |
disabled | boolean | If true, the component will be disabled. | false |
onActiveChange | (indexActive: number) => void | This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter. | - |
Required children | React.ReactElement <AccordionPropsType>[] | React.ReactElement <AccordionPropsType> | Contains one or more accordions. | - |
margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
Single accordion, part of an accordion group.
Name | Type | Description | Default |
---|---|---|---|
Required label | string | The panel label. | - |
icon | string | React.ReactNode & React.SVGProps <SVGSVGElement> | Element or path used as the icon that will be placed next to panel label. | - |
assistiveText | string | Assistive text to be placed on the right side of the panel. | - |
disabled | boolean | If true, the component will be disabled. | false |
Required children | React.ReactNode | The expanded panel of the accordion. This area can be used to render custom content. | - |