Outline Views

Explore iOS Outline View hierarchical tree structure interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.

9:41
●●●● WiFi 🔋
Files
⚠️ HIG Violation: Unclear hierarchy
📚 HIG Guidelines — Try It Yourself
✓ Do — Good Example
✗ Don't — Bad Example

✓ Do This

  • Show clear parent-child relationships with indentation
  • Use disclosure indicators for expandable items
  • Maintain consistent indentation levels
  • Use appropriate icons for item types

✗ Don't Do This

  • Flatten deep hierarchies without context
  • Remove visual hierarchy cues
  • Make tree items too small to tap
  • Use outline views for flat, non-hierarchical data

👆 See the bad pattern in the iPhone preview above

Show Disclosure Indicator
None
Single
Multiple
Sidebar
Inset Grouped
Plain
SwiftUI Code
List { OutlineGroup(fileSystem, children: \.children) { item in Label(item.name, systemImage: item.icon) } } .listStyle(.sidebar)