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

DisclosureGroup

Vanilla CSS theme

Expanding

API