Autumn Sale50% offCOMPOT

SwiftUI Settings, Lists & Rows

Apple-standard settings rows, LabeledContent formatters, accordion FAQ disclosure groups, and footers. (9 components available in Compot).

1 of 9Pro ComponentiOS 16.0+

Settings List Row Label Basic

Standard iOS settings navigation row with SF symbol and title.

View Component & Details
SettingsListRowLabelBasic.swift
Unlock in App
import SwiftUI

struct SettingsListRowLabelBasic: View {
    var body: some View {
        Label {
            Text("Notifications")
            .foregroundStyle(.primary)
        } icon: {

        // ...
        // Complete source code available in Compot Pro on the App Store.
Compot Pro Component

Unlock full code & interactive preview

Interactive live preview and complete SwiftUI code available in the Compot App.

Available for macOS & iOS • 85+ free components included

2 of 9Pro ComponentiOS 16.0+

Settings LabeledContent List Row

Settings row with title and right-aligned detail text using LabeledContent.

View Component & Details
SettingsLabeledcontentListRow.swift
Unlock in App
import SwiftUI

struct SettingsLabeledcontentListRow: View {
    var body: some View {
        LabeledContent {
            Text("On")
        } label: {
            Label {

        // ...
        // Complete source code available in Compot Pro on the App Store.
Compot Pro Component

Unlock full code & interactive preview

Interactive live preview and complete SwiftUI code available in the Compot App.

Available for macOS & iOS • 85+ free components included

3 of 9Pro ComponentiOS 16.0+

Settings Row with Custom LabeledContent

Rich settings item with custom badge and secondary status text.

View Component & Details
SettingsRowWithCustomLabeledcontent.swift
Unlock in App
import SwiftUI

struct SettingsRowWLabeledContent: View {
    var body: some View {
        Form {
            LabeledContent {
                Text("Router Name")
                    .foregroundStyle(.secondary)

        // ...
        // Complete source code available in Compot Pro on the App Store.
Compot Pro Component

Unlock full code & interactive preview

Interactive live preview and complete SwiftUI code available in the Compot App.

Available for macOS & iOS • 85+ free components included

4 of 9Free ComponentiOS 16.0+

LabeledContent with Formatters

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

View Component & Details
LabeledcontentWithFormatters.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))
        }
    }
}

#Preview {
    LabeledContentWFormat()
}
5 of 9Pro ComponentiOS 16.0+

List Row Compact with Title, Subtitle & Detail

3-tier information row with leading icon, title, subtitle, and trailing value.

View Component & Details
ListRowCompactWithTitleSubtitleDetail.swift
Unlock in App
import SwiftUI

struct ListRowCompactWithTitleSubtitleDetail: View {
    var body: some View {
        HStack(alignment: .center, spacing: 4) {
            VStack(alignment: .leading, spacing: 4) {
                Text("Title")
                .font(.system(size: 17, weight: .medium))

        // ...
        // Complete source code available in Compot Pro on the App Store.
Compot Pro Component

Unlock full code & interactive preview

Interactive live preview and complete SwiftUI code available in the Compot App.

Available for macOS & iOS • 85+ free components included

6 of 9Free ComponentiOS 16.0+

Disclosure Group as FAQ

Accordion-style expandable/collapsible FAQ item with chevron animation.

View Component & Details
DisclosureGroupAsFAQ.swift
import SwiftUI

struct DisclosureGroupAsFAQ: View {
    var body: some View {
        DisclosureGroup("What is Compot?") {
            Text("Compot is a collection of reusable SwiftUI components and templates for fast development of mobile apps.")
        }
    }
}

#Preview {
    DisclosureGroupAsFAQ()
}