Disclosure

Disclosure controls the visibility of content in context.

Overview

Disclosure uses the HTML details/summary components 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


Edit live code
<Disclosure title="What is a carbon footprint?">
  <P>A person's carbon footprint is made up of all the carbon that’s released through actions they take and choices they make, in their day-to-day lives.</P>
</Disclosure><Disclosure title="What is a carbon footprint?">
  <P>A person's carbon footprint is made up of all the carbon that’s released through actions they take and choices they make, in their day-to-day lives.</P>
</Disclosure>

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 open prop.


Edit live code
<Disclosure
  title="What is a carbon footprint?"
  open
>
  <P>A person's carbon footprint is made up of all the carbon that’s released through actions they take and choices they make, in their day-to-day lives. </P>
</Disclosure><Disclosure
  title="What is a carbon footprint?"
  open
>
  <P>A person's carbon footprint is made up of all the carbon that’s released through actions they take and choices they make, in their day-to-day lives. </P>
</Disclosure>

Properties

Name	Values	Default
title (required)	ReactNode
openalternatively, `expanded` can be used	Boolean	false
onToggle(open: boolean) => void	Function
...	JSX.IntrinsicElements["details"]