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.
isDisabled
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'}}>
<DisclosureHeader style={{flex: 1}}>Files</DisclosureHeader>
<Button aria-label="Settings"><Settings size={16} /></Button>
</div>
<DisclosurePanel>Files content</DisclosurePanel>
</Disclosure>