Beta Preview

Accordion

An accordion is a container for multiple disclosures.

size 
density 
isQuiet 
isDisabled 
allowsMultipleExpanded 
import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2';

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

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

NameTypeDefault
childrenReact.ReactNodeDefault:
The disclosure elements in the accordion.
stylesDefault:
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.
isQuietbooleanDefault:
Whether the accordion should be displayed with a quiet style.
allowsMultipleExpandedbooleanDefault:
Whether multiple items can be expanded at the same time.
isDisabledbooleanDefault:
Whether all items are disabled.
expandedKeysIterable<Key>Default:
The currently expanded keys in the group (controlled).
defaultExpandedKeysIterable<Key>Default:
The initial expanded keys in the group (uncontrolled).