alpha

Disclosure

A collapsible section of content composed of a heading that expands and collapses a panel.

install	`yarn add @react-spectrum/accordion`
version	3.0.0-alpha.35
usage	`import {Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/accordion'`

View repository

GitHub

View package

NPM

Example#

<Disclosure>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <DisclosurePanel>
    <p>Details about system requirements here.</p>
  </DisclosurePanel>
</Disclosure>

<Disclosure>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <DisclosurePanel>
    <p>Details about system requirements here.</p>
  </DisclosurePanel>
</Disclosure>

<Disclosure>
  <DisclosureHeader>
    System Requirements
  </DisclosureHeader>
  <DisclosurePanel>
    <p>
      Details about
      system
      requirements
      here.
    </p>
  </DisclosurePanel>
</Disclosure>

Content#

Disclosure follows the ARIA Disclosure pattern and consists of two children: DisclosureHeader and DisclosurePanel. The DisclosureHeader controls the expansion of the DisclosurePanel and the contents inside.

Disclosure can be used as a standalone collapsible section of content. However, multiple discosures can be combined to form an Accordion.

Internationalization#

In order to internationalize a disclosure, all text content within the disclosure should be localized.

Events#

Disclosure accepts an onExpandedChange prop which is triggered when it is expanded or collapsed. The example below uses onExpandedChange to programmatically control disclosure expansion.

function ControlledExpansion() {
  let [isExpanded, setIsExpanded] = React.useState<boolean>(false);

  return (
    <>
      <Disclosure isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
        <DisclosureHeader>System Requirements</DisclosureHeader>
        <DisclosurePanel>
          <p>Details about system requirements here.</p>
        </DisclosurePanel>
      </Disclosure>
      <div style={{ marginTop: '20px' }}>
        {isExpanded
          ? 'The disclosure is expanded'
          : 'The disclosure is collapsed'}
      </div>
    </>
  );
}

function ControlledExpansion() {
  let [isExpanded, setIsExpanded] = React.useState<boolean>(
    false
  );

  return (
    <>
      <Disclosure
        isExpanded={isExpanded}
        onExpandedChange={setIsExpanded}
      >
        <DisclosureHeader>
          System Requirements
        </DisclosureHeader>
        <DisclosurePanel>
          <p>Details about system requirements here.</p>
        </DisclosurePanel>
      </Disclosure>
      <div style={{ marginTop: '20px' }}>
        {isExpanded
          ? 'The disclosure is expanded'
          : 'The disclosure is collapsed'}
      </div>
    </>
  );
}

function ControlledExpansion() {
  let [
    isExpanded,
    setIsExpanded
  ] = React.useState<
    boolean
  >(false);

  return (
    <>
      <Disclosure
        isExpanded={isExpanded}
        onExpandedChange={setIsExpanded}
      >
        <DisclosureHeader>
          System
          Requirements
        </DisclosureHeader>
        <DisclosurePanel>
          <p>
            Details about
            system
            requirements
            here.
          </p>
        </DisclosurePanel>
      </Disclosure>
      <div
        style={{
          marginTop:
            '20px'
        }}
      >
        {isExpanded
          ? 'The disclosure is expanded'
          : 'The disclosure is collapsed'}
      </div>
    </>
  );
}

The disclosure is collapsed

Props#

Disclosure#

Name	Type	Description
`children`	`React.ReactNode`	The contents of the disclosure. The first child should be the header, and the second child should be the panel.
`isQuiet`	`boolean`	Whether the Disclosure should be displayed with a quiet style.
`id`	`Key`	An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`.
`isDisabled`	`boolean`	Whether the disclosure is disabled.
`isExpanded`	`boolean`	Whether the disclosure is expanded (controlled).
`defaultExpanded`	`boolean`	Whether the disclosure is expanded by default (uncontrolled).

Events

Name	Type	Description
`onExpandedChange`	`( (isExpanded: boolean )) => void`	Handler that is called when the disclosure's expanded state changes.

Layout

Name	Type	Description
`slot`	`string \| null`	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.

Accessibility

Name	Type	Description
`aria-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	Identifies the element (or elements) that provide a detailed, extended description for the object.

DisclosureHeader#

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

Accessibility

Name	Type	Description
`id`	`string`	The element's unique identifier. See MDN.
`aria-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	Identifies the element (or elements) that provide a detailed, extended description for the object.

DisclosurePanel#

Name	Type	Description
`children`	`React.ReactNode`	The contents of the accordion panel.

Accessibility

Name	Type	Default	Description
`role`	`'group' \| 'region'`	`'group'`	The accessibility role for the disclosure's panel.
`id`	`string`	—	The element's unique identifier. See MDN.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.

Visual Options#

Disabled#

<Disclosure isDisabled>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <DisclosurePanel>
    <p>Details about system requirements here.</p>
  </DisclosurePanel>
</Disclosure>

<Disclosure isDisabled>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <DisclosurePanel>
    <p>Details about system requirements here.</p>
  </DisclosurePanel>
</Disclosure>

<Disclosure isDisabled>
  <DisclosureHeader>
    System Requirements
  </DisclosureHeader>
  <DisclosurePanel>
    <p>
      Details about
      system
      requirements
      here.
    </p>
  </DisclosurePanel>
</Disclosure>

Expanded#

<Disclosure defaultExpanded>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <DisclosurePanel>
    <p>Details about system requirements here.</p>
  </DisclosurePanel>
</Disclosure>

<Disclosure defaultExpanded>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <DisclosurePanel>
    <p>Details about system requirements here.</p>
  </DisclosurePanel>
</Disclosure>

<Disclosure
  defaultExpanded
>
  <DisclosureHeader>
    System Requirements
  </DisclosureHeader>
  <DisclosurePanel>
    <p>
      Details about
      system
      requirements
      here.
    </p>
  </DisclosurePanel>
</Disclosure>

Details about system requirements here.

Quiet#

<Disclosure isQuiet>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <DisclosurePanel>
    <p>Details about system requirements here.</p>
  </DisclosurePanel>
</Disclosure>

<Disclosure isQuiet>
  <DisclosureHeader>System Requirements</DisclosureHeader>
  <DisclosurePanel>
    <p>Details about system requirements here.</p>
  </DisclosurePanel>
</Disclosure>

<Disclosure isQuiet>
  <DisclosureHeader>
    System Requirements
  </DisclosureHeader>
  <DisclosurePanel>
    <p>
      Details about
      system
      requirements
      here.
    </p>
  </DisclosurePanel>
</Disclosure>