LabeledContent with Formatters
Row displaying formatted values (currency, bytes, percentages, measurements).
SwiftUI Implementation
Pure Vanilla Swift • No DependencieslabeledContentWFormat.swift
import SwiftUI
struct AgeFormatStyle: FormatStyle {
typealias FormatInput = Int
typealias FormatOutput = String
func format(_ value: Int) -> String {
if value == 1 {
return "\\(value) year"
} else {
return "\\(value) years"
}
}
}
extension FormatStyle where Self == AgeFormatStyle {
static var age: AgeFormatStyle { AgeFormatStyle() }
}
struct LabeledContentWFormat: View {
let balance = 1000000
let byte = Measurement(value: 1024, unit: UnitInformationStorage.bytes)
let age = 18
let height = Measurement(value: 180, unit: UnitLength.centimeters) // Centimeters, meters, kilometers, inches, feet, miles, etc.
let weight = Measurement(value: 70, unit: UnitMass.kilograms) // Kilograms, grams, ounces, pounds, stones, etc.
let area = Measurement(value: 1000, unit: UnitArea.acres) // SquareMeters, squareCentimeters, squareMillimeters, squareInches, squareFeet, squareYards, squareMiles, acres, hectares.
let temperature = Measurement(value: 22, unit: UnitTemperature.celsius) // Celsius, Fahrenheit, Kelvin, etc.
let speed = Measurement(value: 50, unit: UnitSpeed.milesPerHour) // MetersPerSecond, kilometersPerHour, milesPerHour, knots.
let accelaration = Measurement(value: 8, unit: UnitAcceleration.metersPerSecondSquared)
let time = Measurement(value: 2, unit: UnitDuration.hours) // Seconds, minutes, hours, etc.
let volume = Measurement(value: 1, unit: UnitVolume.liters) // Milliliters, liters, cups, pints, gallons, etc.
let angle = Measurement(value: 90, unit: UnitAngle.degrees) // Degrees, radians, gradians, etc.
let pressure = Measurement(value: 1013.25, unit: UnitPressure.millibars) // Millibars, bars, pounds per square inch, etc.
let energy = Measurement(value: 200, unit: UnitEnergy.kilocalories) // Joules, kilojoules, calories, kilocalories, etc.
let electricCharge = Measurement(value: 1, unit: UnitElectricCharge.ampereHours) // Coulombs, ampere hours, etc.
let frequency = Measurement(value: 1, unit: UnitFrequency.kilohertz)
let illuminance = Measurement(value: 12, unit: UnitIlluminance.lux)
let power = Measurement(value: 33, unit: UnitPower.kilowatts)
let resistance = Measurement(value: 42, unit: UnitElectricResistance.ohms)
let fuelEfficiency = Measurement(value: 100, unit: UnitFuelEfficiency.milesPerGallon) // LitersPer100Kilometers, milesPerImperialGallon, milesPerGallon.
var body: some View {
Form {
LabeledContent("Balance", value: balance, format: .currency(code: "USD"))
LabeledContent("Memory", value: byte, format: .byteCount(style: .memory))
LabeledContent("Age", value: age, format: .age)
LabeledContent("Height", value: height, format: .measurement(width: .abbreviated))
LabeledContent("Weight", value: weight, format: .measurement(width: .abbreviated))
LabeledContent("Area", value: area, format: .measurement(width: .abbreviated))
LabeledContent("Temperature", value: temperature, format: .measurement(width: .abbreviated))
LabeledContent("Speed", value: speed, format: .measurement(width: .abbreviated))
LabeledContent("Accelaration", value: accelaration, format: .measurement(width: .abbreviated))
LabeledContent("Time", value: time, format: .measurement(width: .abbreviated))
LabeledContent("Volume", value: volume, format: .measurement(width: .abbreviated))
LabeledContent("Angle", value: angle, format: .measurement(width: .abbreviated))
LabeledContent("Pressure", value: pressure, format: .measurement(width: .abbreviated))
LabeledContent("Energy", value: energy, format: .measurement(width: .abbreviated))
LabeledContent("Electric Charge", value: electricCharge, format: .measurement(width: .abbreviated))
LabeledContent("Frequency", value: frequency, format: .measurement(width: .abbreviated))
LabeledContent("Illuminance", value: illuminance, format: .measurement(width: .abbreviated))
LabeledContent("Power", value: power, format: .measurement(width: .abbreviated))
LabeledContent("Resistance", value: resistance, format: .measurement(width: .abbreviated))
LabeledContent("Fuel Efficiency", value: fuelEfficiency, format: .measurement(width: .abbreviated))
}
}
}Ready to copy and paste directly into any Xcode project running iOS 16.0+.
Recommended Use Cases
- App settings, preferences, and account configuration screens
Component Details
- Category
- Settings, Lists & Rows
- iOS Compatibility
- iOS 16.0+
- Xcode Version
- Xcode 15+
- Platform
- iOS
- License Tier
- Free
- Themes & Contexts
- settings
C
Compot for iOS
Native SwiftUI playground app
Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.
Get Compot on the App StoreRelated SwiftUI Components
More components in Settings, Lists & Rows and related app architectures.
ButtonsiOS 16.0+
Button for Copying
Smart copy button that temporarily switches icon and text to "Copied!" with tactile haptic feedback.
View Component & Code
ButtonsiOS 16.0+
Bordered Green Rounded Button (Regular)
Standard-sized bordered button with custom green tint and continuous rounded corners.
View Component & Code
ButtonsiOS 16.0+
Bordered Green Rounded Button (Mini)
Compact mini bordered button for tight layouts, list items, and secondary badges.
View Component & Code