Outline Views — HIG Playground

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

Selection Style

None

Single

Multiple

Style

Sidebar

Inset Grouped

Plain

SwiftUI Code

List { OutlineGroup(fileSystem, children: \.children) { item in Label(item.name, systemImage: item.icon) } } .listStyle(.sidebar)