Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - DisclosureGroup
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
Toggle System Requirements</button> <button class="control-button" onclick="toggleDisclosure('controlled-personal')">Toggle Personal Information</button> <div class="status-display" id="controlled-status"> Currently expanded: System Requirements </div> </div> <div class="disclosure-group" id="controlled-example"> <div class="disclosure-item"> <button class="disclosure-header" aria-expanded="true" data-disclosure="controlled-system"> <span class="chevron">▶</span> System Requirements </button> <div class="disclosure-panel expanded"> <p>Details about system requirements here. This section can be controlled programmatically.</p> </div> </div> <div class="disclosure-item"> <button class="disclosure-header" aria-expanded="false" data-disclosure="controlled-personal"> <span class="chevron">▶</span> Personal Information </button> <div class="disclosure-panel"> <p>Details about personal information here. This section can also be controlled programmatically.</p> </div> </div> </div> </div> <h2>Multiple Expanded</h2> <div class="example-section"> <p>By default, only one disclosure will be open at a time. To allow multiple disclosures to expand, use the allowsMultipleExpanded prop.</p> <div class="disclosure-group" id="multiple-example" data-multiple="true"> <div class="disclosure-item"> <button class="disclosure-header" aria-expanded="true" data-disclosure="multi-system"> <span class="chevron">▶</span> System Requirements </button> <div class="disclosure-panel expanded"> <p>Details about system requirements here. Multiple sections can be open simultaneously.</p> </div> </div> <div class="disclosure-item"> <button class="disclosure-header" aria-expanded="true" data-disclosure="multi-personal"> <span class="chevron">▶</span> Personal Information </button> <div class="disclosure-panel expanded"> <p>Details about personal information here. This section is also expanded by default.</p> </div> </div> </div> </div> <h2>Disabled</h2> <div class="example-section"> <p>A DisclosureGroup can be disabled using the isDisabled prop.</p> <div class="disclosure-group" id="disabled-example"> <div class="disclosure-item"> <button class="disclosure-header" aria-expanded="false" data-disclosure="disabled-system" data-disabled="true"> <span class="chevron">▶</span> System Requirements </button> <div class="disclosure-panel"> <p>Details about system requirements here.</p> </div> </div> <div class="disclosure-item"> <button class="disclosure-header" aria-expanded="false" data-disclosure="disabled-personal" data-disabled="true"> <span class="chevron">▶</span> Personal Information </button> <div class="disclosure-panel"> <p>Details about personal information here.</p> </div> </div> </div> </div> <h2>Interactive Elements</h2> <div class="example-section"> <p>You can add interactive elements adjacent to the disclosure heading.</p> <div class="disclosure-group" id="interactive-example"> <div class="disclosure-item"> <div class="interactive-example"> <button class="disclosure-header" aria-expanded="false" data-disclosure="interactive-system" style="flex: 1;"> <span class="chevron">▶</span> System Requirements </button> <button onclick="alert('Additional action clicked!')">Click me</button> </div> <div class="disclosure-panel"> <p>Details about system requirements here. Notice the additional button in the header.</p> </div> </div> <div class="disclosure-item"> <div class="interactive-example"> <button class="disclosure-header" aria-expanded="false" data-disclosure="interactive-personal" style="flex: 1;"> <span class="chevron">▶</span> Personal Information </button> <button onclick="alert('Another action clicked!')">Click me</button> </div> <div class="disclosure-panel"> <p>Details about personal information here. Each disclosure can have its own interactive elements.</p> </div> </div> </div> </div> <h2>Props</h2> <h3>DisclosureGroup</h3> <table class="props-table"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>defaultExpandedKeys</code></td> <td><code>Iterable<Key></code></td> <td>—</td> <td>The initial expanded keys in the collection (uncontrolled).</td> </tr> <tr> <td><code>expandedKeys</code></td> <td><code>Iterable<Key></code></td> <td>—</td> <td>The expanded keys in the collection (controlled).</td> </tr> <tr> <td><code>allowsMultipleExpanded</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>Whether multiple items can be expanded at the same time.</td> </tr> <tr> <td><code>isDisabled</code></td> <td><code>boolean</code></td> <td>—</td> <td>Whether the disclosure group is disabled.</td> </tr> <tr> <td><code>onExpandedChange</code></td> <td><code>(keys: Set<Key>) => void</code></td> <td>—</td> <td>Handler that is called when the expanded items change.</td> </tr> </tbody> </table> <h3>Disclosure</h3> <table class="props-table"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>id</code></td> <td><code>Key</code></td> <td>—</td> <td>A unique identifier for the disclosure item.</td> </tr> <tr> <td><code>isExpanded</code></td> <td><code>boolean</code></td> <td>—</td> <td>Whether the disclosure is expanded (controlled).</td> </tr> <tr> <td><code>defaultExpanded</code></td> <td><code>boolean</code></td> <td>—</td> <td>Whether the disclosure is expanded by default (uncontrolled).</td> </tr> <tr> <td><code>isDisabled</code></td> <td><code>boolean</code></td> <td>—</td> <td>Whether the disclosure is disabled.</td> </tr> </tbody> </table> <h2>Styling</h2> <p>React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc.</p> <div class="code-block">.react-aria-DisclosureGroup { /* ... */}.react-aria-DisclosureGroup[data-disabled] { /* ... */}.react-aria-Disclosure[data-expanded] { /* ... */} </div> <h2>Component States</h2> <div class="component-grid"> <div class="component-card"> <h4>DisclosureGroup States</h4> <ul> <li><code>data-disabled</code> - Whether the disclosure group is disabled</li> <li><code>data-orientation</code> - The orientation of the disclosure group</li> </ul> </div> <div class="component-card"> <h4>Disclosure States</h4> <ul> <li><code>data-expanded</code> - Whether the disclosure is expanded</li> <li><code>data-disabled</code> - Whether the disclosure is disabled</li> <li><code>data-focus-visible</code> - Whether the disclosure is keyboard focused</li> </ul> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on GitHub, or updating this file.</p> <div class="links"> <a href="https://github.com/adobe/react-spectrum/issues" target="_blank">Report an issue</a> <a href="https://github.com/adobe/react-spectrum/discussions" target="_blank">Ask a question</a> </div> </div> <script> const expandedKeys = new Set(['personal', 'system', 'multi-system', 'multi-personal']); const controlledKeys = new Set(['controlled-system']); function initializeDisclosures() { document.querySelectorAll('.disclosure-header').forEach(header => { header.addEventListener('click', function(e) { if (this.hasAttribute('data-disabled')) { return; } const disclosureId = this.getAttribute('data-disclosure'); const panel = this.nextElementSibling; const isExpanded = this.getAttribute('aria-expanded') === 'true'; const group = this.closest('.disclosure-group'); const allowsMultiple = group.hasAttribute('data-multiple'); if (!allowsMultiple && !isExpanded) { group.querySelectorAll('.disclosure-header').forEach(otherHeader => { if (otherHeader !== this) { otherHeader.setAttribute('aria-expanded', 'false'); otherHeader.querySelector('.chevron').style.transform = 'rotate(0deg)'; const otherPanel = otherHeader.nextElementSibling; if (otherPanel) { otherPanel.classList.remove('expanded'); } } }); } this.setAttribute('aria-expanded', !isExpanded); this.querySelector('.chevron').style.transform = !isExpanded ? 'rotate(90deg)' : 'rotate(0deg)'; if (panel) { panel.classList.toggle('expanded', !isExpanded); } }); header.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }); }); } function toggleDisclosure(disclosureId) { const header = document.querySelector(`[data-disclosure="${disclosureId}"]`); if (header) { header.click(); updateControlledStatus(); } } function updateControlledStatus() { const expanded = []; document.querySelectorAll('#controlled-example .disclosure-header[aria-expanded="true"]').forEach(header => { expanded.push(header.textContent.trim()); }); const statusEl = document.getElementById('controlled-status'); if (statusEl) { statusEl.textContent = `Currently expanded: ${expanded.length > 0 ? expanded.join(', ') : 'None'}`; } } document.addEventListener('DOMContentLoaded', function() { initializeDisclosures(); updateControlledStatus(); }); window.toggleDisclosure = toggleDisclosure; </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">