Disclosure.mdx

import {Layout} from '../../src/Layout'; export default Layout;

import docs from 'docs:@react-spectrum/s2';

export const tags = ['accordion', 'collapsible', 'expandable']; export const description = 'A collapsible section of content.';

Disclosure

{docs.exports.Disclosure.description}

"use client";
import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2/Disclosure';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Disclosure
  styles={style({width: 250})}
  /* PROPS */>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>Details about system requirements here.</DisclosurePanel>
</Disclosure>

Expanding

Use the isExpanded or defaultExpanded prop to set the expanded state, and onExpandedChange to handle user interactions.

"use client";
import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2/Disclosure';
import {useState} from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example() {
  let [isExpanded, setIsExpanded] = useState(true);

  return (
    <Disclosure
      styles={style({width: 250})}
      /*- begin highlight -*/
      isExpanded={isExpanded}
      onExpandedChange={setIsExpanded}>
      {/*- end highlight -*/}
      <DisclosureTitle>Download, Install, and Set Up</DisclosureTitle>
      <DisclosurePanel>Instructions on how to download, install, and set up</DisclosurePanel>
    </Disclosure>
  );
}

Content

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

"use client";
import {Disclosure, DisclosureTitle, DisclosurePanel, DisclosureHeader} from '@react-spectrum/s2/Disclosure';
import {ActionButton} from '@react-spectrum/s2/ActionButton';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Disclosure styles={style({width: 250})}>
  {/*- begin highlight -*/}
  <DisclosureHeader>
    <DisclosureTitle>Project Settings</DisclosureTitle>
    <ActionButton>Edit</ActionButton>
  </DisclosureHeader>
  {/*- end highlight -*/}
  <DisclosurePanel>
    Configure your project settings including name, description, and permissions.
  </DisclosurePanel>
</Disclosure>

Slots

DisclosureTitle supports icons, Text as children.

"use client"

import {Disclosure, DisclosureTitle, DisclosurePanel, DisclosureHeader, Text} from '@react-spectrum/s2/Disclosure';
import Project from '@react-spectrum/s2/icons/Project';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Disclosure styles={style({width: 250})}>
  <DisclosureHeader>
    {/*- begin highlight -*/}
    <DisclosureTitle>
      <Project />
      <Text>Project Settings</Text>
    </DisclosureTitle>
    {/*- end highlight -*/}
  </DisclosureHeader>
  <DisclosurePanel>
    Configure your project settings including name, description, and permissions.
  </DisclosurePanel>
</Disclosure>

API

<Disclosure>
  <DisclosureHeader>
    <DisclosureTitle />
  </DisclosureHeader>
  <DisclosurePanel />
</Disclosure>

Disclosure

DisclosureHeader

DisclosureTitle

DisclosurePanel