Skip to main content
Official government website
GovBB Design System
Menu

Show/hide

Reveal secondary content, such as help text, on demand.

Examples
HTML and React
Group
Content
On this page

Preview

Show/Hide
Open in new tab

The Show/Hide component is a disclosure that reveals secondary content when a user chooses to see it. It is useful for help text and other detail that not every user needs to read.

Usage

When to use

  • Use show/hide for one section of supporting information that only some users need.
  • Use it for optional help, a worked example or additional explanation.

When not to use

  • Do not hide information most users need to understand or complete the task.
  • Do not use it for sequential steps, validation errors or the primary action.

Best practices

Make the closed summary meaningful

Write a short summary that names what will be revealed, such as “Help with proof of address”. Avoid vague labels such as “More information”.

Keep disclosure content focused

Use one show/hide for one secondary section. Avoid nesting disclosures, and show the content by default when most users need it or when hiding it would prevent completion.

Writing the summary

Write the summary as a descriptive noun phrase in sentence case, such as “What is a parish?”, rather than a vague label like “More info”. The summary is built on the native <details> element, so keyboard and screen reader behaviour work without any extra scripting.

Open by default

A disclosure can start open if the content inside it is useful to most users but still optional to read. Use this sparingly: most disclosures should start closed.

Open by default
Open in new tab