apple-dev-mcp/content/universal/gauges.md

Complete Apple development guidance: Human Interface Guidelines (design) + Technical Documentation for iOS, macOS, watchOS, tvOS, and visionOS

---
title: Gauges
platform: universal
category: visual-design
url: https://developer.apple.com/design/human-interface-guidelines/gauges
quality_score: 0.39
content_length: 3254
last_updated: 2025-07-20T03:44:45.651Z
keywords: ["gauges","universal","visual-design","widgets","visual","color"]
has_code_examples: false
has_images: false
is_fallback: false
---

Gauges A gauge displays a specific numerical value within a range of values. In addition to indicating the current value in a range, a gauge can provide more context about the range itself. For example, a temperature gauge can use text to identify the highest and lowest temperatures in the range and display a spectrum of colors that visually reinforce the changing values. Anatomy A gauge uses a circular or linear path to represent a range of values, mapping the current value to a specific point on the path. A standard gauge displays an indicator that shows the current value’s location; a gauge that uses the capacity style displays a fill that stops at the value’s location on the path. Circular and linear gauges in both standard and capacity styles are also available in a variant that’s visually similar to watch OS complications. This variant — called accessory — works well in i OS Lock Screen widgets and anywhere you want to echo the appearance of complications. Note In addition to gauges, mac OS also supports level indicators, some of which have visual styles that are similar to gauges. For guidance, see mac OS.Best practices Write succinct labels that describe the current value and both endpoints of the range. Although not every gauge style displays all labels, Voice Over reads the visible labels to help people understand the gauge without seeing the screen. Consider filling the path with a gradient to help communicate the purpose of the gauge. For example, a temperature gauge might use colors that range from red to blue to represent temperatures that range from hot to cold. Not supported in tv OS.mac OSIn addition to supporting gauges, mac OS also defines a level indicator that displays a specific numerical value within a range. You can configure a level indicator to convey capacity, rating, or — rarely — relevance. The capacity style can depict discrete or continuous values. Continuous. A horizontal translucent track that fills with a solid bar to indicate the current value. Discrete. A horizontal row of separate, equally sized, rectangular segments. The number of segments matches the total capacity, and the segments fill completely — never partially — with color to indicate the current value. Consider using the continuous style for large ranges. A large value range can make the segments of a discrete capacity indicator too small to be useful. Consider changing the fill color to inform people about significant parts of the range. By default, the fill color for both capacity indicator styles is green. If it makes sense in your app, you can change the fill color when the current value reaches certain levels, such as very low, very high, or just past the middle. You can change the fill color of the entire indicator or you can use the tiered state to show a sequence of several colors in one indicator, as shown below. Tiered level appearance For guidance using the rating style to help people rank something, see Rating indicators. Although rarely used, the relevance style can communicate relevancy using a shaded horizontal bar. For example, a relevance indicator might appear in a list of search results, helping people visualize the relevancy of the results when sorting or comparing multiple items.