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

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>

Disclosure

Vanilla CSS theme

Expanding

Content

API