Explore iOS Gauge Circular/Linear styles, color gradients, and range settings interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.
9:41
●●●●WiFi🔋
Gauges
Circular Gauge
65
BPM
0100
Linear Gauge
Battery65%
0100
Compact
♥
Heart Rate
65 BPM
⚡
Energy
42%
💧
Hydration
78%
⚠️ HIG Violation: Gauge is misleading
📚 HIG Guidelines — Try It Yourself
✓ Do — Good Example
✗ Don't — Bad Example
✓ Do This
Use gauges to display a single value within a defined range
Choose circular style for prominent, at-a-glance readings
Use linear style for compact, inline value displays
Apply color gradients to convey meaning (green=good, red=warning)
Include clear labels and units for the value
✗ Don't Do This
Don't use a gauge for values that change extremely rapidly
Don't omit the range — users need min/max context
Don't use multiple circular gauges in a small space
Don't use arbitrary colors — follow semantic meaning