Disclosure
Disclosure controls the visibility of content in context.
Overview
Disclosure can be used to hide information that isn’t necessary upfront. There are other components that can be used for hiding content, e.g. Accordion and Tabs.
Usage
Content
Content inside a disclosure should be hidden if not appropriate to all users or contains additional contextual information relating to a term. An example would be “How is my carbon footprint calculated?”, with a short paragraph relating to details about the calculation method.
Hidden content is easily missed, so essential information should not be placed inside a disclosure.
Accessibility
The Disclosure component will automatically link the component toggle button to the content and set the relevant aria attributes.
Variations
Default expanded
Disclosure is an uncontrolled component and manages its own state - the default state can be set with the expanded prop.
Properties
| Name | Values | Default |
|---|---|---|
title (required) | ReactNode | |
expanded | Boolean | false |
onToggle(expanded) => null | Function | |
... | JSX.IntrinsicElements["button"] |