Skip to contentSkip to navigation
DocsDocs

Disclosure

A one-line summary that shows and hides optional details below it.

StableSince 1.0.0
On this page

Overview

Show code, VisibilityHelp.tsx

Anatomy

  1. Summary

  2. Panel

Show code, DisclosureAnatomy.tsx

Behaviour

Find in page

Finding text in a closed disclosure's details opens it, where the browser supports it.

One at a time

Disclosures in a set can open one at a time, where the browser supports it.

Show code, FrequentQuestions.tsx

Open on an error

The application can open a disclosure itself, such as when a field inside has an error.

Show code, OpenOnError.tsx

Rules

A disclosure hides only what most people don't need, one level deep.

Use it when

  • Optional guidance most people don't need, such as how a setting works
  • Settings most people leave alone, such as advanced options
DoOptional guidance in a disclosure, and what the task needs in sight.
Show code, OptionalHelp.tsx
Don’tRules people need, hidden: they find them only after an error.
Show code, HiddenRules.tsx

One level

Don't put a disclosure inside another.

Accessibility

KeyAction
Tab, Shift+TabMoves to the summary, then into an open panel.
Enter, SpaceOpens or closes the panel.

Related

  • A list of questions or sections whose answers people open one at a time.

  • Instructions or errors people need to complete a task, which must stay visible.

  • Switching between views of the same content.

  • Details beside a control that close when people move on.