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

As described in the docs for CalendarDate

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

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

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

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