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. | false |
| 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>) | Material Symbol name or SVG element as the icon that will be placed next to the panel label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_". | - |
| 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> | Material Symbol name or SVG element as the icon that will be placed next to the panel label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_". | - |
| 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. | - |
() => { const [isExpanded, changeIsExpanded] = useState(true); const onChange = (newValue) => { changeIsExpanded(newValue); }; return ( <DxcInset space="2rem"> <DxcAccordion label="How to edit your profile?" isExpanded={isExpanded} onChange={onChange} > <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Profile. </DxcInset> </DxcAccordion> </DxcInset> ); }
() => { const [indexAccordion, setIndexAccordion] = useState(0); const onActiveChange = (index) => { setIndexAccordion((currentIndex) => (currentIndex === index ? -1 : index)); }; return ( <DxcInset space="2rem"> <DxcAccordionGroup indexActive={indexAccordion} onActiveChange={onActiveChange} > <DxcAccordionGroup.Accordion label="How to edit your profile?"> <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Profile. </DxcInset> </DxcAccordionGroup.Accordion> <DxcAccordionGroup.Accordion label="How to log out?"> <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Log out. </DxcInset> </DxcAccordionGroup.Accordion> </DxcAccordionGroup> </DxcInset> ); }
() => { return ( <DxcInset space="2rem"> <DxcAccordionGroup defaultIndexActive={0}> <DxcAccordionGroup.Accordion label="How to edit your profile?"> <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Profile. </DxcInset> </DxcAccordionGroup.Accordion> <DxcAccordionGroup.Accordion label="How to log out?"> <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Log out. </DxcInset> </DxcAccordionGroup.Accordion> </DxcAccordionGroup> </DxcInset> ); }
() => { return ( <DxcInset space="2rem"> <DxcFlex direction="column" gap="2rem"> <DxcAccordion label="How to edit your profile?" icon="filled_info"> <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Profile. </DxcInset> </DxcAccordion> <DxcAccordionGroup defaultIndexActive={0}> <DxcAccordionGroup.Accordion label="How to edit your profile?" icon="filled_check_circle" > <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Profile. </DxcInset> </DxcAccordionGroup.Accordion> <DxcAccordionGroup.Accordion label="How to log out?" icon="filled_check_circle" > <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Log out. </DxcInset> </DxcAccordionGroup.Accordion> </DxcAccordionGroup> </DxcFlex> </DxcInset> ); }