Disclosure widget¶

An interactive interface control that exposes or conceals a nearby subordinate content region while communicating its expanded/collapsed state and preserving keyboard, focus, and assistive-technology operability.

Version: v1 · 2026-09-28 · History
Domain-specific #: 9003
Domain group: Professional & Organizational Practice
Origin domain: Human-Computer Interaction (HCI)
Subdomains: User Interface Widgets, Accessibility → Human-Computer Interaction (HCI)

Core Idea¶

A disclosure widget—also called an expander or disclosure triangle—is a compact trigger associated with a nearby region of subordinate content. Activating it alternates between collapsed and expanded states, allowing an interface to defer secondary settings or detail without removing them from the current context.

The icon can point sideways/downward, down/upward, or show plus/minus, but a text label and consistent state semantics are essential. Implementation synchronizes visible content, expanded state exposed to accessibility APIs, keyboard activation, focus order, hit target, and any layout resize or animation. An icon must not be the only accessible name.

Persistence is a product decision rather than a constitutive property. Remembering state can support repeated work; resetting can protect predictability or privacy. Nested disclosures and large hidden regions can become disorienting. The pattern should not conceal required information, errors, or irreversible consequences merely to create visual simplicity.

How would you explain it like I'm…

The Peek-Inside Arrow

A disclosure widget is like a little flap on a lift-the-flap book. The extra picture is right there under the flap; you open it when you want to see more and close it to keep the page tidy. The flap should have words on it so you know what is hiding underneath.

The Show-and-Hide Button

A disclosure widget is a small control, often a triangle or a plus sign with a label beside it, that shows or hides a section of extra details right where you are. Click once and the section opens; click again and it folds shut. This keeps a screen tidy while keeping less-used options close by instead of moving them to another page. The label matters, because an arrow alone doesn't tell you what is hidden. Designers also shouldn't tuck important things, like warnings or errors, inside one just to make a page look simple.

Expand/Collapse Toggle

A disclosure widget (also called an expander or disclosure triangle) is a compact trigger tied to a nearby region of secondary content, toggling it between collapsed and expanded. Unlike a link that takes you to a new page, it keeps the details in the same context and just defers them. The icon can be a sideways-to-down arrow, a down-to-up arrow, or plus/minus, but a text label and consistent open/closed meaning are what make it usable. It has to work with a keyboard and tell screen readers whether it is open, and the icon must not be its only name. Whether it remembers being open next time is a design choice, not part of what makes it a disclosure widget. Hiding required information, errors, or irreversible consequences inside one is a misuse, and deeply nested or huge hidden sections can disorient people.

A disclosure widget is an interaction pattern in which a small trigger controls the visibility of an adjacent subordinate content region, alternating between collapsed and expanded states. Its purpose is progressive disclosure within the current context: secondary settings or detail are deferred without being removed or relocated. Visual conventions vary (rotating triangle, chevron, plus/minus), but a text label and consistent state semantics are essential. A correct implementation keeps several things synchronized: the visible content, the expanded state exposed to accessibility APIs, keyboard activation, focus order, an adequate hit target, and any layout reflow or animation. The icon must never be the sole accessible name. Persisting the open/closed state across visits is a product decision: remembering helps repeated work, while resetting can protect predictability or privacy. Nested disclosures and large hidden regions can disorient users, and the pattern should never be used to conceal required information, errors, or irreversible consequences for the sake of visual simplicity.

Structural Signature¶

Sig role-phrases:

trigger control. Provides an operable labeled target for toggle action. Constitutive control. If altered: A decorative triangle is not enough.
controlled child region. Contains subordinate settings/content whose visibility changes. Constitutive target relation. If altered: Navigation to a separate page is a different pattern.
binary disclosure state. Represents expanded/collapsed and keeps icon, content, accessibility state, and layout synchronized. Identity-bearing state relation. If altered: Ambiguous arrows cause action/state confusion.
interaction/accessibility behavior. Supports pointer, keyboard, focus order, programmatic name, expanded state, and usable hit area. Necessary operation. If altered: Mouse-only disclosure excludes users.
persistence and layout policy. Decides memory, animation, resizing, nested behavior, and response to content changes. Contextual design rule. If altered: Persistence should match user expectations and privacy.

What It Is Not¶

Not a dropdown. It toggles an associated content region, not a transient choice list.
Not a tooltip. The user controls persistent visibility.
Not a decorative icon. The trigger has state and behavior.
Not license to hide essentials. Progressive disclosure must respect task importance.

Scope of Application¶

Disclosure widgets appear in file dialogs, preference panes, forms, detail rows, inspector panels, trees, documentation, dashboards, filters, mobile settings, and code-folding interfaces.

Advanced settings. Defers infrequent controls.
Detail-on-demand. Expands summaries in place.
Hierarchical browsing. Reveals child branches.
Form simplification. Groups conditional fields.
Responsive layouts. Manages limited space.

Clarity¶

Report trigger label/icon, controlled-region ID, default state, current-state versus action icon convention, pointer/keyboard behavior, focus on collapse, accessibility name and expanded relation, animation/reduced motion, layout change, persistence scope, nested/group rules, loading/errors, and analytics/usability evidence.

Manages Complexity¶

One binary toggle coordinates visual hierarchy, DOM visibility, accessibility state, focus, persistence, and layout. Small inconsistencies produce invisible content, lost focus, or misleading state.

Abstract Reasoning¶

Identify truly subordinate content and the user decision to reveal it.
Bind one labeled trigger to one controlled region.
Synchronize visible, programmatic, icon, and focus states.
Define persistence, animation, nesting, and responsive layout.
Test discoverability and full keyboard/assistive operation.

Knowledge Transfer¶

Reveal/hide state transfers to trees, accordions, code folding, and details elements, but selection, navigation, mutual exclusion, and focus semantics must be remapped.

Examples¶

Canonical¶

A file dialog labels an ‘Advanced options’ button, reports collapsed state, expands an associated encoding/settings region on keyboard or pointer activation, changes its indicator, and preserves logical focus.

Mapped back: trigger control → labeled Advanced options button; controlled child region → encoding/settings group; binary disclosure state → synchronized expanded attribute and indicator; interaction/accessibility behavior → keyboard/pointer/focus support; persistence and layout policy → dialog resizes without hiding action buttons.

Applied / In Practice¶

A settings page remembers each user's expanded diagnostics panel across sessions, but resets it on shared devices and announces asynchronously loaded child content and errors within the controlled region.

Mapped back: trigger control → diagnostics expander; controlled child region → loaded diagnostic settings; binary disclosure state → state remains synchronized; interaction/accessibility behavior → announcement/error association; persistence and layout policy → account-scoped with shared-device exception.

Structural Tensions¶

T1: reduced clutter vs. discoverability. Collapsing detail simplifies scanning while users may never see important options. Diagnostic: Is the content genuinely secondary?

T2: state persistence vs. predictability/privacy. Remembered choices aid repeated work while surprising later users or exposing prior context. Diagnostic: Whose state and for how long?

T3: animation/context vs. motion and focus stability. Transition explains spatial change while motion or layout shifts disorient. Diagnostic: Can the change remain perceivable without disruption?

Structural–Framed Character¶

The widget is frame-dominant. A binary state controls region visibility; importance, labeling, discoverability, and accessibility are interaction frames. Its portable skeleton is Controlled Reveal, a prospective future-prime candidate. Evaluative weight and human practice are constitutive; origin lies in UI conventions; vocabulary travels with state/action remapping. Its character: user-controlled exposure of subordinate information with synchronized perceptible state.

Structural Core vs. Domain Accent¶

Skeletal core. A trigger toggles access to a dependent region and communicates state consistently.

Domain-bound accent. Buttons, triangles, DOM regions, keyboard focus, ARIA state, and layout define the widget.

Why not prime. Controlled reveal travels; this is a UI control pattern.

Controlled Reveal. Prospective portable skeleton.
Progressive Disclosure. The broader design strategy may use this widget.
No strict DAG edge is added.

Neighborhood in Abstraction Space¶

Disclosure widget sits in a moderately populated region (55^th percentile for distinctiveness): it has near-neighbors but no dense thicket of look-alikes.

Family — Language, Mind & Meaning-Making (57 abstractions)

Nearest neighbors

Computed from structural-signature embeddings · 2026-10-08

Not to Be Confused With¶

Dropdown menu. Tell: Is a choice popup or child content region controlled?
Accordion. Tell: Does a group impose panel coordination?
Tooltip. Tell: Can the user persistently control visibility?
Tree expander. Tell: Is hierarchical navigation semantics also present?

References¶

Frozen Wikipedia discovery revision: https://en.wikipedia.org/wiki/Disclosure_widget (revision 1242249254).
Preserved source candidate: https://discussions.apple.com/message/9986899#10043023
Preserved source candidate: https://web.archive.org/web/20170115235334/https://discussions.apple.com/message/9986899
Preserved source candidate: https://www-03.ibm.com/support/techdocs/atsmastr.nsf/Web/TwHelp
Preserved source candidate: https://web.archive.org/web/20051024075302/http://www-03.ibm.com/support/techdocs/atsmastr.nsf/Web/TwHelp

The frozen Wikipedia revision is discovery provenance. The retained source set was reviewed for identity, formal or operational relation, and scope. The encyclopedia's structural synthesis is bounded to those claims; a thin authority surface is recorded as a nonblocking source-strengthening repair rather than concealed.