React Aria
DocsReleasesBlog
React Aria

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.

Theme 

isDisabled 
Example
Disclosure.tsx
Disclosure.css
import {Disclosure, DisclosureHeader, DisclosurePanel} from './Disclosure';

<Disclosure>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <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, DisclosureHeader, DisclosurePanel} from './Disclosure';
import {useState} from 'react';

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

  return (
    <Disclosure
      isExpanded={isExpanded}
      onExpandedChange={setIsExpanded}>
      <DisclosureHeader>Download, Install, and Set Up</DisclosureHeader>
      <DisclosurePanel>Instructions on how to download, install, and set up</DisclosurePanel>
    </Disclosure>
  );
}

Content

Add interactive elements such as buttons adjacent to the disclosure heading by wrapping them in a <div>. <Heading> and <Button> must not have interactive children.

import {Disclosure, DisclosureHeader, DisclosurePanel} from './Disclosure';
import {Button} from './Button';
import {Settings} from 'lucide-react';

<Disclosure style={{width: 200}}>
  <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
    <DisclosureHeader style={{flex: 1}}>Files</DisclosureHeader>
    <Button aria-label="Settings"><Settings /></Button>
  </div>
  <DisclosurePanel>Files content</DisclosurePanel>
</Disclosure>

API

LandscapeButtonLandscape contentPanel 
<Disclosure>
  <Heading>
    <Button slot="trigger" />
  </Heading>
  <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.

NameType
idKey

An id for the disclosure when used within a DisclosureGroup, matching the id used in expandedKeys.

isDisabledboolean

Whether the disclosure is disabled.

isExpandedboolean

Whether the disclosure is expanded (controlled).

defaultExpandedboolean

Whether the disclosure is expanded by default (uncontrolled).

children<>

The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-Disclosure

Render PropCSS Selector
isExpandedCSS Selector: [data-expanded]
Whether the disclosure is expanded.
isFocusVisibleWithinCSS Selector: [data-focus-visible-within]
Whether the disclosure has keyboard focus.
isDisabledCSS Selector: [data-disabled]
Whether the disclosure is disabled.
stateCSS Selector: —
State of the disclosure.

DisclosurePanel

A DisclosurePanel provides the content for a disclosure.

NameTypeDefault
childrenReactNodeDefault: —

The children of the component.

labelElementTypeElementTypeDefault: 'label'

The HTML element used to render the label, e.g. 'label', or 'span'.

Default className: react-aria-DisclosurePanel

Render PropCSS Selector
isFocusVisibleWithinCSS Selector: [data-focus-visible-within]
Whether keyboard focus is within the disclosure panel.
CSS Variable
--disclosure-panel-width
The disclosure panel's intrinsic width in pixels. Useful for animations.
--disclosure-panel-height
The disclosure panel's intrinsic height in pixels. Useful for animations.

Related pages