Disclosure

A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.

size

density

isQuiet

isDisabled

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

<Disclosure
  styles={style({width: 250})}
  <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.

Instructions on how to download, install, and set up

import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2';
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})}
      isExpanded={isExpanded}
      onExpandedChange={setIsExpanded}>
      <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.

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

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

API

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

Disclosure

A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.

Name	Type	Default
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the disclosure.
`density`	`'compact' \| 'regular' \| 'spacious'`	Default: `'regular'`
The amount of space between the disclosures.
`isQuiet`	`boolean`	Default: —
Whether the disclosure should be displayed with a quiet style.
`children`	`ReactNode`	Default: —
The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel.
`id`	`Key`	Default: —
An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`.
`isDisabled`	`boolean`	Default: —
Whether the disclosure is disabled.
`isExpanded`	`boolean`	Default: —
Whether the disclosure is expanded (controlled).
`defaultExpanded`	`boolean`	Default: —
Whether the disclosure is expanded by default (uncontrolled).
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

DisclosureHeader

A wrapper element for the disclosure title that can contain other elements not part of the trigger.

Name	Type
`children`	`React.ReactNode`

DisclosureTitle

A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.

Name	Type	Default
`level`	`number`	Default: `3`
The heading level of the disclosure header.
`children`	`React.ReactNode`	Default: —
The contents of the disclosure header.

DisclosurePanel

A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.

Name	Type
`children`	`React.ReactNode`