Disclosure
Last Updated: September 2026Disclosures are expandable containers that allow users to dive into content deeper when they wish. They are best suited for small amounts of information that feels one layer of complexity deeper.
Source CodeAnatomy
link- 1Prefix
- 2Label
- 3Collapse/Expand Icon Indicator
- 4Content Slot
Variants
linkDefault
Closed until the user expands it.
Open by default
defaultOpen shows the panel on first paint.
Small
size="sm" for denser layouts.
Disabled
disabled prevents expanding or collapsing.
Usage Guidelines
linkWhen to use
- •To hide optional or advanced detail behind a single progressive disclosure.
- •When one collapsible block is enough — not a list of sections.
- •Inline under a field, card, or paragraph to keep the page scannable.
When not to use
- •For multiple peer sections — use Accordion.
- •For content that must always be visible for safety or compliance.
- •As a substitute for navigation or tabs.
Use a header that previews what expanding will reveal.
Don't use vague headers like 'Click here' or 'More'.
Keep one Disclosure for one chunk of optional detail.
Don't stack many peer Disclosures — use Accordion instead.
Behaviors
linkOpen state
- •Uncontrolled: defaultOpen.
- •Controlled: open + onOpenChange (receives the next boolean open state).
Disabled
- •disabled freezes the current open/closed state and blocks interaction.
Content Guidelines
linkHeaders
- •Prefer verb phrases that describe the reveal ('Show fee breakdown').
- •Keep headers short enough to scan on one line.
Panel content
- •Include only the detail that was worth hiding.
- •Avoid critical errors or required fields only visible when expanded.
Accessibility
linkText & Labels
- •header is the accessible name of the trigger.
- •Don't hide required instructions exclusively inside a closed disclosure.
ARIA attributes
- •Expand/collapse state is exposed to assistive technology.
Keyboard Support
- •Tab → focus the header.
- •Enter / Space → toggle open state.
WCAG Compliance Standards
FAQs
linkDisclosure vs Accordion?
Disclosure is one collapsible. Accordion is a list of sections with shared expand behavior.
How do I control it from parent state?
Pass open and onOpenChange. Use React.useState to keep them in sync.
What sizes are available?
sm and md (default).