SwiftUI Settings, Lists & Rows
Apple-standard settings rows, LabeledContent formatters, accordion FAQ disclosure groups, and footers. (9 components available in Compot).
Settings List Row Label Basic
Standard iOS settings navigation row with SF symbol and title.
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.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
Settings LabeledContent List Row
Settings row with title and right-aligned detail text using LabeledContent.
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.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
Settings Row with Custom LabeledContent
Rich settings item with custom badge and secondary status text.
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.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
LabeledContent with Formatters
Row displaying formatted values (currency, bytes, percentages, measurements).
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()
}List Row Compact with Title, Subtitle & Detail
3-tier information row with leading icon, title, subtitle, and trailing value.
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.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
Disclosure Group as FAQ
Accordion-style expandable/collapsible FAQ item with chevron animation.
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()
}More SwiftUI Settings, Lists & Rows Components (3)
Browse additional settings, lists & rows components from our library. Click through to view standalone source code and usage examples.
FAQ List with Disclosure Groups
Complete multi-item expandable FAQ section for help screens.
Footer Basic
Minimal app version and copyright text footer for settings lists.
Footer Fancy
Polished footer with "Developed with ❤️ in Prague", company branding, and live app version.