Accordion
An accordion is a container for multiple disclosures.
size
density
The amount of space between the disclosure items.
density
isQuiet
isDisabled
allowsMultipleExpanded
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
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). | ||