How it works
AccessoryLinearGaugeStyle is a built-in GaugeStyle that draws a gauge as a slim horizontal bar, sized and weighted to sit comfortably alongside other content rather than dominate it. Use it when you want to show a single bounded value — a speed, a fill level, a percentage — in a compact, glanceable form that reads like an accessory to the surrounding UI. It keeps the bar visually quiet while still surfacing the value's label and the bounds of its range, making it a good fit for dense layouts, list rows, and complication-style widgets. You apply it through the gaugeStyle(_:) modifier rather than instantiating it directly.
Provide a bounded value to Gauge
The style renders whatever Gauge gives it, so it expects a value within a 0...1 range by default. Here the gauge is driven by
speed, a@StateDouble of0.6, which the linear bar fills to 60% of its width.Select the style with .gaugeStyle(.accessoryLinear)
You opt into AccessoryLinearGaugeStyle through the
gaugeStyle(_:)modifier using the static accessor.accessoryLinear, instead of constructing the struct yourself. Calling.gaugeStyle(.accessoryLinear)on theGaugeswaps its default appearance for the thin horizontal accessory bar.Supply the labels the style lays out
AccessoryLinearGaugeStyle positions the gauge's labels around the bar: the descriptive label, the current value, and the minimum and maximum bounds. The example feeds it
Text("Speed"), acurrentValueLabelofText("\(Int(speed * 100))"), andminimumValueLabel/maximumValueLabelofText("0")andText("100"), which the style renders at the ends of the track.Color the fill with .tint(_:)
The accessory linear bar honors the surrounding tint, so you control the filled portion's color with the
tint(_:)modifier. Here.tint(.green)paints the filled segment up to the current value green while leaving the remaining track in its neutral style.
@State private var speed = 0.6 to speed = 0.95 and watch the green fill in the .accessoryLinear bar stretch nearly to the maximumValueLabel.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct AccessoryLinearGaugeStyleDemo: View {
@State private var speed = 0.6
var body: some View {
Gauge(value: speed) {
Text("Speed")
} currentValueLabel: {
Text("\(Int(speed * 100))")
} minimumValueLabel: {
Text("0")
} maximumValueLabel: {
Text("100")
}
.gaugeStyle(.accessoryLinear)
.tint(.green)
.padding()
}
}