Segmented Controls — HIG Playground

Explore iOS Segmented Control sliding selection animation and adjust the number of segments interactively.

9:41

●●●●WiFi🔋

Library

All

Music

Podcasts

Showing all items

View Mode

Grid

List

Grid view selected

Time Range

Day

Week

Month

Year

Showing daily data

⚠️ HIG Violation: Improper segmented control

📚 HIG Guidelines — Try It Yourself

✓ Do — Good Example

✗ Don't — Bad Example

✓ Do This

Use 2-5 segments maximum
Keep segment labels short and equal width
Use to switch between views of the same content
Always have one segment selected

✗ Don't Do This

Don't use more than 5 segments
Don't mix text and icons in segments
Don't use for navigation between different screens
Don't use when options are not closely related

👆 See the bad pattern in the iPhone preview above

Style

Text Only

With Icons

SwiftUI Code

@State private var selection = 0 Picker("Category", selection: $selection) { Text("All").tag(0) Text("Music").tag(1) Text("Podcasts").tag(2) } .pickerStyle(.segmented)