Accordion

An accordion is a container for multiple disclosures.

size

density

isQuiet

isDisabled

allowsMultipleExpanded

import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Accordion styles={style({width: 220})}>
  <AccordionItem id="personal">
    <AccordionItemTitle>Personal Information</AccordionItemTitle>
    <AccordionItemPanel>Personal information form here.</AccordionItemPanel>
  </AccordionItem>
  <AccordionItem id="billing">
    <AccordionItemTitle>Billing Address</AccordionItemTitle>
    <AccordionItemPanel>Billing address form here.</AccordionItemPanel>
  </AccordionItem>
</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 <AccordionItem>.

Application settings content

import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, 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}>
      <AccordionItem id="settings">
        <AccordionItemTitle>Settings</AccordionItemTitle>
        <AccordionItemPanel>Application settings content</AccordionItemPanel>
      </AccordionItem>
      <AccordionItem id="preferences">
        <AccordionItemTitle>Preferences</AccordionItemTitle>
        <AccordionItemPanel>User preferences content</AccordionItemPanel>
      </AccordionItem>
      <AccordionItem id="advanced">
        <AccordionItemTitle>Advanced</AccordionItemTitle>
        <AccordionItemPanel>Advanced configuration options</AccordionItemPanel>
      </AccordionItem>
    </Accordion>
  );
}

Content

Use AccordionItemHeader to add additional elements alongside the title, such as action buttons or icons.

import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, AccordionItemHeader, ActionButton} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Accordion>
  <AccordionItem styles={style({width: 250})}>
    <AccordionItemHeader>
      <AccordionItemTitle>Project Settings</AccordionItemTitle>
      <ActionButton>Edit</ActionButton>
    </AccordionItemHeader>
    <AccordionItemPanel>
      Configure your project settings including name, description, and permissions.
    </AccordionItemPanel>
  </AccordionItem>
  <AccordionItem id="preferences">
    <AccordionItemTitle>Preferences</AccordionItemTitle>
    <AccordionItemPanel>User preferences content</AccordionItemPanel>
  </AccordionItem>
</Accordion>

API

<Accordion>
  <AccordionItem>
    <AccordionItemHeader>
      <AccordionItemTitle />
    </AccordionItemHeader>
    <AccordionItemPanel />
  </AccordionItem>
</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<>`	Default: —
The currently expanded keys in the group (controlled).
`defaultExpandedKeys`	`Iterable<>`	Default: —
The initial expanded keys in the group (uncontrolled).

AccordionItem

A accordion item is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.

Name	Type	Default
`children`	`ReactNode`	Default: —
The contents of the accordion, consisting of a AccordionItemTitle and AccordionItemPanel.
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the disclosure.
`density`	`'compact' \| 'regular' \| 'spacious'`	Default: `'regular'`
The amount of space between the disclosures.
`isQuiet`	`boolean`	Default: —
Whether the disclosure should be displayed with a quiet style.
`id`		Default: —
An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`.
`isDisabled`	`boolean`	Default: —
Whether the disclosure is disabled.
`isExpanded`	`boolean`	Default: —
Whether the disclosure is expanded (controlled).
`defaultExpanded`	`boolean`	Default: —
Whether the disclosure is expanded by default (uncontrolled).
`styles`		Default: —
Spectrum-defined styles, returned by the `style()` macro.

AccordionItemHeader

A wrapper element for the accordion item title that can contain other elements not part of the trigger.

Name	Type
`children`	`React.ReactNode`

AccordionItemTitle

An accordion item title consisting of a heading and a trigger button to expand/collapse the panel.

Name	Type	Default
`level`	`number`	Default: `3`
The heading level of the disclosure header.
`children`	`React.ReactNode`	Default: —
The contents of the disclosure header.

AccordionItemPanel

An accordion item panel is a collapsible section of content that is hidden until the accordion item is expanded.

Name	Type
`children`	`React.ReactNode`