Disclosure controls
Disclosure controls reveal and hide information and functionality related to specific content.
When to use it
Use one when secondary detail would crowd the view but should stay one click away. Advanced options, item details, long explanations.
Anatomy
| Part | Value |
|---|---|
| Plate | Black at 8% (white at 7% in dark mode). Rounded square at 16, 20 and 24px (radius a quarter of the side: 4, 5, 6px); circle at 28 and 36px |
| Chevron | Bold, black at 85%. 8 by 5px at 16 and 20px, 12 by 7px from 24px up |
| Direction | Down when collapsed, rotates 180° to up when expanded, 0.2s |
| Hover | 11% |
| Pressed | 16%, light and dark |
| Disabled | Plate 4%, chevron 25% |
Zero-JS use
Advanced options
Anything can live in here. The browser reveals and hides it, and announces the state.
<details class="p-disclosure-group">
<summary>Advanced options <span class="p-disclosure"></span></summary>
<p>Anything can live in here.</p>
</details>The details element does the revealing, hiding, keyboard handling, and screen reader announcements. The chevron rotates when the group opens. No JavaScript.
As a button
<button class="p-disclosure" aria-expanded="false" aria-label="Show details"></button>When your own script controls the reveal, use a button and flip aria-expanded; the chevron follows the attribute. Always give an icon-only button an aria-label, and update it with the state. The middle button above is wired so you can try the rotation.
Five sizes via .p-disclosure-mini through .p-disclosure-xlarge, the shared control ladder. The three small sizes are rounded squares and the two large ones are circles. The chevron does not scale with the plate: it is the 10pt glyph at 16 and 20px and the 13pt glyph from 24px up.
Dark mode
The plate turns to white at 7% (16% pressed, 4% disabled) and the chevron to white at 85%. No extra setup.
Reduced motion
The rotation is removed; the chevron flips instantly between directions.