DisclosureGroup

A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion. It supports both single and multiple expanded items.

Theme

allowsMultipleExpanded

isDisabled

Example

DisclosureGroup.tsx

DisclosureGroup.css

Example

DisclosureGroup.tsx

DisclosureGroup.css

import {DisclosureGroup} from './DisclosureGroup';
import {Disclosure, DisclosureHeader, DisclosurePanel} from './Disclosure';

<DisclosureGroup>
  <Disclosure>
    <DisclosureHeader>Personal Information</DisclosureHeader>
    <DisclosurePanel>Personal information form here.</DisclosurePanel>
  </Disclosure>
  <Disclosure>
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>Billing address form here.</DisclosurePanel>
  </Disclosure>
</DisclosureGroup>

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>
  );
}

API

<DisclosureGroup>
  <Disclosure />
</DisclosureGroup>

DisclosureGroup

Name	Type
`allowsMultipleExpanded`	`boolean`
Whether multiple items can be expanded at the same time.
`isDisabled`	`boolean`
Whether all items are disabled.
`expandedKeys`	`Iterable<Key>`
The currently expanded keys in the group (controlled).
`defaultExpandedKeys`	`Iterable<Key>`
The initial expanded keys in the group (uncontrolled).
`children`	`ChildrenOrFunction<DisclosureGroupRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-DisclosureGroup

Render Prop	CSS Selector
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the disclosure group is disabled.
`state`	CSS Selector: `—`
State of the disclosure group.