Autumn Sale50% offCOMPOT
Settings, Lists & RowsFree ComponentiOS 16.0+Xcode 15+

LabeledContent with Formatters

Row displaying formatted values (currency, bytes, percentages, measurements).

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
labeledContentWFormat.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

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 Store