Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ComponentReactregistry:ui1 dependency

DisclosureToggle

disclosure-toggle

Caret-and-label text button that expands and collapses an adjacent region, with aria-expanded and the touch and focus floors built in.

Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

Use DisclosureToggle wherever content reveals inline: a height-capped list that can drop its cap, a 'more options' tail, an inline detail panel. It is controlled - pass expanded and onExpandedChange - and takes translated expandLabel/collapseLabel. Give the revealed region an id and pass it as controls so assistive tech can follow the relationship.
@whiskeyjack

More from @whiskeyjack