Skip to content

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.

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.

Properties

NameValuesDefault

title (required)

ReactNode

expanded

Boolean

false

onToggle(expanded) => null

Function

...

JSX.IntrinsicElements["button"]

Tokens