Disclosure

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

Example#

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

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

<Disclosure>
  <DisclosureHeader>
    System Requirements
  </DisclosureHeader>
  <DisclosurePanel>
    Details about
    system requirements
    here.
  </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>
          Details about system requirements here.
        </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>
          Details about system requirements here.
        </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>
          Details about
          system
          requirements
          here.
        </DisclosurePanel>
      </Disclosure>
      <div
        style={{
          marginTop:
            '20px'
        }}
      >
        {isExpanded
          ? 'The disclosure is expanded'
          : 'The disclosure is collapsed'}
      </div>
    </>
  );
}

Props#

Disclosure#

DisclosureHeader#

DisclosurePanel#

Visual Options#

Disabled#

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

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

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

Expanded#

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

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

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

Quiet#

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

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

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