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.

Props

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>)`	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`

Accordion Group

Groups two or more accordions to distribute large volumes of information.

Props

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.	-

DxcAccordionGroup.Accordion

Single accordion, part of an accordion group.

Props

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.	-

Examples

Controlled Accordion

() => {
  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 [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>
  );
}

Uncontrolled Accordion

() => {
  return (
    <DxcInset space="2rem">
      <DxcAccordion label="How to edit your profile?" defaultIsExpanded>
        <DxcInset space="1.5rem">
          To edit your profile you need to go to Settings and click on Profile.
        </DxcInset>
      </DxcAccordion>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcAccordion label="How to edit your profile?" defaultIsExpanded>
        <DxcInset space="1.5rem">
          To edit your profile you need to go to Settings and click on Profile.
        </DxcInset>
      </DxcAccordion>
    </DxcInset>
  );
}

Controlled Accordion Group

() => {
  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>
  );
}

() => {
  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>
  );
}

Uncontrolled Accordion Group

() => {
  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">
      <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>
  );
}

Icons

() => {

  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>
  );
}

() => {

  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>
  );
}

Props
Accordion Group
- Props
- DxcAccordionGroup.Accordion
Examples

Edit this page on GitHub

Report an issue on GitHub

Halstack Provider

NextAlert

Accordion

Props

Accordion Group

Props

DxcAccordionGroup.Accordion

Props

Examples

Controlled Accordion

Uncontrolled Accordion

Controlled Accordion Group

Uncontrolled Accordion Group

Icons

Contents