Accordion

An accordion is a container for multiple disclosures.

size

density

isQuiet

isDisabled

allowsMultipleExpanded

import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Accordion styles={style({width: 220})}>
  <Disclosure id="personal">
    <DisclosureTitle>Personal Information</DisclosureTitle>
    <DisclosurePanel>Personal information form here.</DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureTitle>Billing Address</DisclosureTitle>
    <DisclosurePanel>Billing address form here.</DisclosurePanel>
  </Disclosure>
</Accordion>

Expanding

Use the defaultExpandedKeys or expandedKeys prop to set the expanded items, and onExpandedChange to handle user interactions. The expanded keys correspond to the id prop of each <Disclosure>.

Application settings content

import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [expandedKeys, setExpandedKeys] = useState(new Set<Key>(['settings']));

  return (
    <Accordion
      expandedKeys={expandedKeys}
      onExpandedChange={setExpandedKeys}>
      <Disclosure id="settings">
        <DisclosureTitle>Settings</DisclosureTitle>
        <DisclosurePanel>Application settings content</DisclosurePanel>
      </Disclosure>
      <Disclosure id="preferences">
        <DisclosureTitle>Preferences</DisclosureTitle>
        <DisclosurePanel>User preferences content</DisclosurePanel>
      </Disclosure>
      <Disclosure id="advanced">
        <DisclosureTitle>Advanced</DisclosureTitle>
        <DisclosurePanel>Advanced configuration options</DisclosurePanel>
      </Disclosure>
    </Accordion>
  );
}

API

<Accordion>
  <Disclosure />
</Accordion>

Accordion

Name	Type	Default
`children`	`React.ReactNode`	Default: —
The disclosure elements in the accordion.
`styles`	`StylesPropWithHeight`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the accordion.
`density`	`'compact' \| 'regular' \| 'spacious'`	Default: `'regular'`
The amount of space between the disclosure items.
`isQuiet`	`boolean`	Default: —
Whether the accordion should be displayed with a quiet style.
`allowsMultipleExpanded`	`boolean`	Default: —
Whether multiple items can be expanded at the same time.
`isDisabled`	`boolean`	Default: —
Whether all items are disabled.
`expandedKeys`	`Iterable<Key>`	Default: —
The currently expanded keys in the group (controlled).
`defaultExpandedKeys`	`Iterable<Key>`	Default: —
The initial expanded keys in the group (uncontrolled).