Disclosure Controls
Disclosure controls are UI elements that expand or collapse additional content on demand, allowing users to reveal more information without leaving the current context.
Philosophy
Disclosure controls support progressive disclosure, showing only what’s necessary at first and hiding details until requested.
They reduce cognitive load by keeping interfaces clean.
They let users control the level of detail they want to see.
They preserve context by revealing inline content instead of navigating away.
Anatomy
Variants
Standard
Single toggle that reveals extra content inline.
States
Collapsed
Content hidden, icon points right/down.
Expanded
Content revealed, icon rotates to indicate state.
Usage tips
Dos
Use for optional or secondary content (e.g., FAQs, filters).
Clearly label the trigger so users know what’s inside.
Provide smooth animations for context.
Use icons consistently (chevrons, plus/minus).
Don’ts
Don’t hide critical or primary content behind disclosure controls.
Don’t nest too deeply — it confuses hierarchy.
Don’t use vague labels like “More info” without context.
Real-world example
