DisclosureGroup
A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion. It supports both single and multiple expanded items.
allowsMultipleExpanded
isDisabled
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 type {Key} from 'react-aria-components';
import {DisclosureGroup} from './DisclosureGroup';
import {Disclosure, DisclosureHeader, DisclosurePanel} from './Disclosure';
import {useState} from 'react';
function Example() {
let [expandedKeys, setExpandedKeys] = useState(new Set<Key>(['system']));
return (
<DisclosureGroup
expandedKeys={expandedKeys}
onExpandedChange={setExpandedKeys}>
<Disclosure id="settings">
<DisclosureHeader>Settings</DisclosureHeader>
<DisclosurePanel>Application settings content</DisclosurePanel>
</Disclosure>
<Disclosure id="preferences">
<DisclosureHeader>Preferences</DisclosureHeader>
<DisclosurePanel>User preferences content</DisclosurePanel>
</Disclosure>
<Disclosure id="advanced">
<DisclosureHeader>Advanced</DisclosureHeader>
<DisclosurePanel>Advanced configuration options</DisclosurePanel>
</Disclosure>
</DisclosureGroup>
);
}