Accordion
The accordion component is a vertical stack of interactive headers used to group related content into collapsible sections, allowing users to expand or hide content based on their needs or preferences. It enhances the user experience by organizing information into smaller, digestible chunks, helping reduce cognitive load and save screen space.
| Name | Type | Description | Default |
|---|---|---|---|
| independent | boolean | When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously. | false |
| defaultIndexActive | number | number[] | Initially active accordion, only when it is uncontrolled. If the accordion is not independent, several accordions can be activated by default. | - |
| indexActive | number | 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. If the accordion is not independent, several accordions can be activated. | - |
| onActiveChange | (index: number | 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. | - |
| 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. | - |
Required children | ReactElement<AccordionPropsType>[] | ReactElement<AccordionPropsType> | Contains one or more accordion items. | - |
Accordion item, that composes the accordion component.
| Name | Type | Description | Default |
|---|---|---|---|
Required label | string | The panel label. | - |
New subLabel | string | Additional info label positioned under the label. | - |
New badge | { position: 'before' | 'after'; element: ReactNode } | Badge component to add extra value to the accordion. | - |
New statusLight | React.ReactNode | Status light component to add extra value to the accordion. | - |
| 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. | - |
| tabIndex | number | Value of the tabindex attribute. | 0 |
() => { return ( <DxcInset space="2rem"> <DxcAccordion> <DxcAccordion.AccordionItem 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> </DxcAccordion.AccordionItem> </DxcAccordion> </DxcInset> ); }
() => { const [indexAccordion, setIndexAccordion] = useState(0); const onActiveChange = (index) => { setIndexAccordion((currentIndex) => (currentIndex === index ? -1 : index)); }; return ( <DxcInset space="2rem"> <DxcAccordion indexActive={indexAccordion} onActiveChange={onActiveChange} independent={true}> <DxcAccordion.AccordionItem 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> </DxcAccordion.AccordionItem> </DxcAccordion> </DxcInset> ); }
() => { return ( <DxcInset space="2rem"> <DxcAccordion defaultIndexActive={0} independent={true}> <DxcAccordion.AccordionItem 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> </DxcAccordion.AccordionItem> </DxcAccordion> </DxcInset> ); }
() => { return ( <DxcInset space="2rem"> <DxcAccordion> <DxcAccordion.AccordionItem label="GET request" subLabel="Jan, 20 2025" badge={{ position: "before", element: <DxcBadge label="GET" color="green"/> }} statusLight={<DxcStatusLight label="Active" mode="success" />} > <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Profile. </DxcInset> </DxcAccordion.AccordionItem> </DxcAccordion> </DxcInset> ); }
() => { return ( <DxcInset space="2rem"> <DxcAccordion> <DxcAccordion.AccordionItem label="How to edit your profile?" icon="filled_info" assistiveText="Ref - 123645" subLabel="Jan, 23 2025"> <DxcInset space="1.5rem"> To edit your profile you need to go to Settings and click on Profile. </DxcInset> </DxcAccordion.AccordionItem> </DxcAccordion> </DxcInset> ); }
() => { return ( <DxcInset space="2rem"> <DxcAccordion independent={false} defaultIndexActive={[0, 2]}> <DxcAccordion.AccordionItem label="Find a person" badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }} statusLight={<DxcStatusLight label="Active" mode="success" />} > <DxcInset space="1.5rem"> Person information </DxcInset> </DxcAccordion.AccordionItem> <DxcAccordion.AccordionItem label="Create a person" assistiveText="Provide all required info" badge={{ position: "before", element: <DxcBadge label="POST" color="blue" /> }} defaultIsExpanded > <DxcInset space="1.5rem"> Person creation information </DxcInset> </DxcAccordion.AccordionItem> <DxcAccordion.AccordionItem label="Find interactions" badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="yellow" /> }} statusLight={<DxcStatusLight label="Active" mode="warning" />} defaultIsExpanded > <DxcInset space="1.5rem"> Interactions information </DxcInset> </DxcAccordion.AccordionItem> <DxcAccordion.AccordionItem label="Delete a person" assistiveText="Deletion will be permanent" icon="delete" badge={{ position: "before", element: <DxcBadge label="DELETE" /> }} > <DxcInset space="1.5rem"> Deletion information </DxcInset> </DxcAccordion.AccordionItem> </DxcAccordion> </DxcInset> ); }