Accordion

A group of disclosures that can be expanded and collapsed.

Example#

<Accordion defaultExpandedKeys={['personal']}>
  <Disclosure id="personal">
    <DisclosureHeader>Personal Information</DisclosureHeader>
    <DisclosurePanel>
      Personal information form here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      Billing address form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

<Accordion defaultExpandedKeys={['personal']}>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal Information
    </DisclosureHeader>
    <DisclosurePanel>
      Personal information form here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      Billing address form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

<Accordion
  defaultExpandedKeys={[
    'personal'
  ]}
>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal
      Information
    </DisclosureHeader>
    <DisclosurePanel>
      Personal
      information form
      here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>
      Billing Address
    </DisclosureHeader>
    <DisclosurePanel>
      Billing address
      form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

Content#

Accordion accepts multiple Disclosure elements as children. Each disclosure accepts an id prop which is passed to the onExpandedChange handler to identify the expanded disclosure within the accordion. See the Events section for more details about expansion.

Internationalization#

In order to internationalize an Accordion, all text content within the accordion should be localized.

Events#

Accordion accepts an onExpandedChange prop which is triggered when a disclosure is expanded or collapsed. The example below uses onExpandedChange to programmatically control disclosure expansion.

import {Key} from '@react-types/shared';

function ControlledExpansion() {
  let [expandedKeys, setExpandedKeys] = React.useState<Set<Key>>(
    new Set(['personal'])
  );

  return (
    <>
      <Accordion expandedKeys={expandedKeys} onExpandedChange={setExpandedKeys}>
        <Disclosure id="personal">
          <DisclosureHeader>Personal Information</DisclosureHeader>
          <DisclosurePanel>
            Personal information form here.
          </DisclosurePanel>
        </Disclosure>
        <Disclosure id="billing">
          <DisclosureHeader>Billing Address</DisclosureHeader>
          <DisclosurePanel>
            Billing address form here.
          </DisclosurePanel>
        </Disclosure>
      </Accordion>
      <div style={{ marginTop: '20px' }}>You have expanded: {expandedKeys}</div>
    </>
  );
}

import {Key} from '@react-types/shared';

function ControlledExpansion() {
  let [expandedKeys, setExpandedKeys] = React.useState<
    Set<Key>
  >(new Set(['personal']));

  return (
    <>
      <Accordion
        expandedKeys={expandedKeys}
        onExpandedChange={setExpandedKeys}
      >
        <Disclosure id="personal">
          <DisclosureHeader>
            Personal Information
          </DisclosureHeader>
          <DisclosurePanel>
            Personal information form here.
          </DisclosurePanel>
        </Disclosure>
        <Disclosure id="billing">
          <DisclosureHeader>
            Billing Address
          </DisclosureHeader>
          <DisclosurePanel>
            Billing address form here.
          </DisclosurePanel>
        </Disclosure>
      </Accordion>
      <div style={{ marginTop: '20px' }}>
        You have expanded: {expandedKeys}
      </div>
    </>
  );
}

import {Key} from '@react-types/shared';

function ControlledExpansion() {
  let [
    expandedKeys,
    setExpandedKeys
  ] = React.useState<
    Set<Key>
  >(
    new Set(['personal'])
  );

  return (
    <>
      <Accordion
        expandedKeys={expandedKeys}
        onExpandedChange={setExpandedKeys}
      >
        <Disclosure id="personal">
          <DisclosureHeader>
            Personal
            Information
          </DisclosureHeader>
          <DisclosurePanel>
            Personal
            information
            form here.
          </DisclosurePanel>
        </Disclosure>
        <Disclosure id="billing">
          <DisclosureHeader>
            Billing
            Address
          </DisclosureHeader>
          <DisclosurePanel>
            Billing
            address form
            here.
          </DisclosurePanel>
        </Disclosure>
      </Accordion>
      <div
        style={{
          marginTop:
            '20px'
        }}
      >
        You have
        expanded:{' '}
        {expandedKeys}
      </div>
    </>
  );
}

Expanded#

By default, only one disclosure will be expanded at a time. To expand multiple disclosures, apply the allowsMultipleExpanded prop to Accordion.

<Accordion
  allowsMultipleExpanded
  defaultExpandedKeys={['personal', 'billing']}
>
  <Disclosure id="personal">
    <DisclosureHeader>Personal Information</DisclosureHeader>
    <DisclosurePanel>
      Personal information form here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      Billing address form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

<Accordion
  allowsMultipleExpanded
  defaultExpandedKeys={['personal', 'billing']}
>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal Information
    </DisclosureHeader>
    <DisclosurePanel>
      Personal information form here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      Billing address form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

<Accordion
  allowsMultipleExpanded
  defaultExpandedKeys={[
    'personal',
    'billing'
  ]}
>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal
      Information
    </DisclosureHeader>
    <DisclosurePanel>
      Personal
      information form
      here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>
      Billing Address
    </DisclosureHeader>
    <DisclosurePanel>
      Billing address
      form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

Props#

Accordion#

Disclosure#

Disclosure Header#

Disclosure Panel#

Visual Options#

Disabled#

<Accordion isDisabled>
  <Disclosure id="personal">
    <DisclosureHeader>Personal Information</DisclosureHeader>
    <DisclosurePanel>
      Personal information form here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      Billing address form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

<Accordion isDisabled>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal Information
    </DisclosureHeader>
    <DisclosurePanel>
      Personal information form here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      Billing address form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

<Accordion isDisabled>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal
      Information
    </DisclosureHeader>
    <DisclosurePanel>
      Personal
      information form
      here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>
      Billing Address
    </DisclosureHeader>
    <DisclosurePanel>
      Billing address
      form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

Quiet#

<Accordion isQuiet>
  <Disclosure id="personal">
    <DisclosureHeader>Personal Information</DisclosureHeader>
    <DisclosurePanel>
      Personal information form here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      Billing address form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

<Accordion isQuiet>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal Information
    </DisclosureHeader>
    <DisclosurePanel>
      Personal information form here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      Billing address form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>

<Accordion isQuiet>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal
      Information
    </DisclosureHeader>
    <DisclosurePanel>
      Personal
      information form
      here.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>
      Billing Address
    </DisclosureHeader>
    <DisclosurePanel>
      Billing address
      form here.
    </DisclosurePanel>
  </Disclosure>
</Accordion>