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.

Code

Usage

Specifications

Props

warning

The padding prop has been deprecated. Consider using layout components like the Inset for the same purpose.

Accordion

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.

Accordion Group

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.

DxcAccordionGroup.Accordion

This must be defined as children of the accordion group. It has the following props:

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.

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

() => {
  const infoIcon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="23"
      height="23"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
    </svg>
  );

  const successIcon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="23"
      height="23"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <DxcAccordion label="How to edit your profile?" icon={infoIcon}>
          <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={successIcon}
          >
            <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={successIcon}
          >
            <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>
  );
}

() => {
  const infoIcon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="23"
      height="23"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
    </svg>
  );

  const successIcon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="23"
      height="23"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <DxcAccordion label="How to edit your profile?" icon={infoIcon}>
          <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={successIcon}
          >
            <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={successIcon}
          >
            <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
- Accordion Group
Examples

Edit this page on GitHub

Halstack Provider

NextAlert

Accordion

Props

Accordion

Accordion Group

DxcAccordionGroup.Accordion

Props

Examples

Controlled Accordion

Uncontrolled Accordion

Controlled Accordion Group

Uncontrolled Accordion Group

Icons

Contents