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.
padding
prop has been deprecated. Consider using layout components like the Inset for the same purpose.Name | Default | Description |
---|---|---|
label: string | The panel label. | |
icon: node | string | 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 | false | If true, the component will be disabled. |
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. | |
onChange: function | 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. | |
children: node | The expanded panel of the accordion. This area can be used to render custom content. | |
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | |
padding: string | object | Deprecated Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes. | |
tabIndex: number | 0 | Value of the tabindex. |
Name | Default | Description |
---|---|---|
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 | false | If true, the component will be disabled. |
onActiveChange: function | This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter. | |
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. |
This must be defined as children of the accordion group. It has the following props:
Name | Default | Description |
---|---|---|
label: string | The panel label. | |
icon: node | string | 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 | false | If true, the component will be disabled. |
children: node | The expanded panel of the accordion. This area can be used to render custom content. | |
padding: string | object | Deprecated Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes. |