A disclosure provides people with additional information, which can be expanded or collapsed to allow people to focus on the information that they need.
There are other components that can be used for hiding content, such as Accordions for hiding multiple pieces of content or expanding on existing content, and Tabs for multiple sections of distinctive content.
Use for content that's extra to the main content and that some users may want to know. For example, 'How carbon footprints are calculated'.
- Never use a disclosure for essential information as it won't be seen by most users.
- If you're using multiple disclosure elements, consider using an Accordion instead.
Live example
Availabile platforms
Platform |
Available |
---|---|
Figma |
v1+ |
Web (@ovotech/element) |
v1+ |
App (@ovotech/element-native) |
v1+ |
How to use
Label
Be plain and direct. Do not phrase it as a question.
Inner content
This is a block of text, ranging from a few words to a paragraph. If the content is no longer than the label, consider using a simple text component instead.
Toggle button
The disclosure is an uncontrolled component and manages its own state. It will link the component toggle button to the content and set the relevant aria attributes.
Expanding by default
The disclosure component can be set as expanded by default by setting the expanded prop to true, but if you're doing this it's highly likely the content would be better in a Text or DescriptionList component.

Properties
These are the properties for anyone implementing this component and code.
Names |
Values |
Default |
---|---|---|
title (required) |
ReactNode |
|
expanded |
Boolean |
false |
onToggle |
Function |
|
... |
JSX.IntrinsicElements["button"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone using the component, I want to be able to understand the purpose of the disclosure based on its visual appearance.
- As someone with a cognitive disability, I want to be able to understand the content within a disclosure from its title alone, so that I don't have to expand and search through the disclosure to understand if it's relevant to me.
- As a keyboard-only user, I want to be able to expand the disclosure in order to find the information that I need.
- As a screen reader user, I want to be able to know that I can interact with the disclosure and whether its currently expanded or collapsed.
Test steps
Use these steps to check that the disclosure component has been implemented correctly:
- Turn on a screen reader
- Navigate to each instance of the disclosure component using the Tab key
- Check that the disclosure's meaningful title is announced, as well as whether the disclosure is expanded or collapsed
- Using the Space or Enter key, toggle the disclosure open, and then check that content within it is announced by the screen reader as expected
- Using the Space or Enter key, toggle the disclosure closed, and then check that the now hidden content within the disclosure is not announced by the screen reader as expected
External resources