Toggles

Explore iOS Toggle (Switch) on/off state transitions and color customization interactively.

9:41
●●●●WiFi🔋
Settings
Connectivity
Airplane Mode
📶
Wi-Fi
📡
Bluetooth
Notifications
🔔
Allow Notifications
🔊
Sounds
📳
Badges
Privacy
📍
Location Services
📷
Camera Access
⚠️ HIG Violation: Improper toggle usage
📚 HIG Guidelines — Try It Yourself
✓ Do — Good Example
✗ Don't — Bad Example

✓ Do This

  • Use toggles for binary on/off states
  • Label clearly what the toggle controls
  • Use green for the default on-state color
  • Place toggles on the trailing edge of list rows

✗ Don't Do This

  • Don't use a toggle when a button is more appropriate
  • Don't change toggle labels based on state
  • Don't use toggles for actions (only states)
  • Don't group more than 7-8 toggles together

👆 See the bad pattern in the iPhone preview above

Show Disabled State
All On
All Off
SwiftUI Code
@State private var isOn = true Toggle("Wi-Fi", isOn: $isOn) .tint(.green)