Disclosure Groups

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

Smooth
Spring
None
1 Level
2 Levels
Inset Grouped
Plain
Sidebar
SwiftUI Code
DisclosureGroup("Account Settings") { Label("Profile", systemImage: "person") Label("Email", systemImage: "envelope") Label("Password", systemImage: "lock") }