Disclosure Groups — HIG Playground

Explore iOS DisclosureGroup expand/collapse behavior interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.

9:41

●●●● WiFi 🔋

Settings

Account Settings ▶

👤 Profile

✉ Email

🔒 Password

Notifications ▶

🔔 Push

✉ Email

💬 SMS

Privacy ▶

📍 Location

👥 Contacts

📷 Photos

⚠️ HIG Violation: Deep nesting causes confusion

📚 HIG Guidelines — Try It Yourself

✓ Do — Good Example

✗ Don't — Bad Example

✓ Do This

Use clear, descriptive section labels
Show disclosure indicator (chevron)
Maintain visual hierarchy with indentation
Animate expand/collapse transitions

✗ Don't Do This

Nest more than 3 levels deep
Hide critical information in collapsed sections
Use disclosure groups for only 1-2 items
Forget to indicate the expanded/collapsed state

👆 See the bad pattern in the iPhone preview above

Animation

Smooth

Spring

None

Nesting Levels

1 Level

2 Levels

Style

Inset Grouped

Plain

Sidebar

SwiftUI Code

DisclosureGroup("Account Settings") { Label("Profile", systemImage: "person") Label("Email", systemImage: "envelope") Label("Password", systemImage: "lock") }