DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

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.

Overview
Code

Props

NameTypeDescriptionDefault
Required
children
ReactElement<AccordionPropsType>[] | ReactElement<AccordionPropsType>Contains one or more accordion items.-
defaultIndexActivenumber | number[]Initially active accordion, only when it is uncontrolled. If the accordion is not independent, several accordions can be activated by default.-
independentbooleanWhen true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.false
indexActivenumber | 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.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize 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.-
onActiveChange(index: number | number[]) => voidThis function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.-

DxcAccordion.AccordionItem

Accordion item, that composes the accordion component.

Props

NameTypeDescriptionDefault
assistiveTextstringAssistive text to be placed on the right side of the panel.-
badge{ position: 'before' | 'after'; element: ReactNode }Badge component to add extra value to the accordion.-
Required
children
React.ReactNodeThe expanded panel of the accordion. This area can be used to render custom content.-
disabledbooleanIf true, the component will be disabled.false
iconstring | (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_".-
Required
label
stringThe panel label.-
statusLightReact.ReactNodeStatus light component to add extra value to the accordion.-
subLabelstringAdditional info label positioned under the label.-
tabIndexnumberValue of the tabindex attribute.0

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAccordion>
        <DxcAccordion.AccordionItem
          label="How to edit your profile?">
          <DxcInset space="var(--spacing-padding-l)">
            <DxcParagraph>To edit your profile you need to go to Settings and click on Profile.</DxcParagraph>
          </DxcInset>
        </DxcAccordion.AccordionItem>
      </DxcAccordion>
    </DxcInset>
  );
}

Controlled Accordion

() => {
  const [indexAccordion, setIndexAccordion] = useState(0);
  const onActiveChange = (index) => {
    setIndexAccordion((currentIndex) => (currentIndex === index ? -1 : index));
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAccordion indexActive={indexAccordion}
        onActiveChange={onActiveChange} independent>
        <DxcAccordion.AccordionItem
          label="How to edit your profile?"
        >
          <DxcInset space="var(--spacing-padding-l)">
            <DxcParagraph>To edit your profile you need to go to Settings and click on Profile.</DxcParagraph>
          </DxcInset>
        </DxcAccordion.AccordionItem>
      </DxcAccordion>
    </DxcInset>
  );
}

Uncontrolled Accordion

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAccordion defaultIndexActive={0} independent>
        <DxcAccordion.AccordionItem label="How to edit your profile?">
          <DxcInset space="var(--spacing-padding-l)">
            <DxcParagraph>To edit your profile you need to go to Settings and click on Profile.</DxcParagraph>
          </DxcInset>
        </DxcAccordion.AccordionItem>
      </DxcAccordion>
    </DxcInset>
  );
}

Badge and status light

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAccordion>
        <DxcAccordion.AccordionItem
          label="GET request"
          subLabel="Jan, 20 2025"
          badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }}
          statusLight={<DxcStatusLight label="Active" mode="success" />}
        >
          <DxcInset space="var(--spacing-padding-l)">
            <DxcParagraph>To edit your profile you need to go to Settings and click on Profile.</DxcParagraph>
          </DxcInset>
        </DxcAccordion.AccordionItem>
      </DxcAccordion>
    </DxcInset>
  );
}

Icons

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAccordion>
          <DxcAccordion.AccordionItem label="How to edit your profile?" icon="filled_info"
            assistiveText="Ref — 123645" subLabel="Jan, 23 2025">
            <DxcInset space="var(--spacing-padding-l)">
              <DxcParagraph>To edit your profile you need to go to Settings and click on
              Profile.</DxcParagraph>
            </DxcInset>
          </DxcAccordion.AccordionItem>
        </DxcAccordion>
    </DxcInset>
  );
}

Group of accordions

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAccordion independent={false} defaultIndexActive={[0, 2]}>
        <DxcAccordion.AccordionItem
          label="Find a person"
          badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }}
          statusLight={<DxcStatusLight label="Active" mode="success" />}
        >
          <DxcInset space="var(--spacing-padding-l)">
            <DxcParagraph>Person information</DxcParagraph>
          </DxcInset>
        </DxcAccordion.AccordionItem>
        <DxcAccordion.AccordionItem
          label="Create a person"
          assistiveText="Provide all required info"
          badge={{ position: "before", element: <DxcBadge label="POST" color="secondary" /> }}
          defaultIsExpanded
        >
          <DxcInset space="var(--spacing-padding-l)">
            <DxcParagraph>Person creation information</DxcParagraph>
          </DxcInset>
        </DxcAccordion.AccordionItem>
        <DxcAccordion.AccordionItem
          label="Find interactions"
          badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="tertiary" /> }}
          statusLight={<DxcStatusLight label="Active" mode="warning" />}
          defaultIsExpanded
        >
          <DxcInset space="var(--spacing-padding-l)">
            <DxcParagraph>Interactions information</DxcParagraph>
          </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="var(--spacing-padding-l)">
            <DxcParagraph>Deletion information</DxcParagraph>
          </DxcInset>
        </DxcAccordion.AccordionItem>
      </DxcAccordion>
    </DxcInset>
  );
}
On this page