SwiftUI.cc
Patterns
PatternFormsBeginner

SwiftUI Settings Screen

A customizable grouped list settings screen with toggle switches and action buttons.

Updated 2026-06
A grouped list-based settings screen with toggles and actions
import SwiftUI

struct SettingsScreen: View {
    @State private var notificationsEnabled = true
    @State private var darkModeEnabled = false
    @State private var enableBiometrics = false

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Preferences")) {
                    Toggle("Notifications", isOn: $notificationsEnabled)
                    Toggle("Dark Mode", isOn: $darkModeEnabled)
                }

                Section(header: Text("Security")) {
                    Toggle("Biometric Login", isOn: $enableBiometrics)
                    Button(action: { /* Handle change password */ }) {
                        Label("Change Password", systemImage: "lock")
                    }
                }

                Section {
                    Button(action: { /* Handle sign out */ }) {
                        Label("Sign Out", systemImage: "arrow.left.circle")
                            .foregroundColor(.red)
                    }
                }
            }
            .navigationTitle("Settings")
        }
    }
}

#Preview {
    SettingsScreen()
}

How It Works

The SettingsScreen is built using SwiftUI's Form, which automatically adapts to a grouped list appearance on iOS. It uses Toggle views for binary settings like Notifications and Dark Mode, providing intuitive on/off controls. Each group of settings is wrapped in a Section with a header label to organize the interface logically.

For actions like "Change Password" and "Sign Out", Button views are used within the form. The "Sign Out" button is styled in red to visually distinguish it as a destructive action. The NavigationStack wraps the form and provides a navigation bar with a title, enhancing the user experience.

This implementation is ideal for apps needing a standard settings interface with minimal effort. The use of state variables (@State) ensures that UI updates automatically reflect changes in the app's settings model.

Customization

Parameter Where to change Example values
notificationsEnabled Toggle binding true, false
darkModeEnabled Toggle binding true, false
enableBiometrics Toggle binding true, false
Section headers Text() inside Section "Account", "Privacy"
Button actions Button action closures navigate, show alert, sign out

Accessibility Notes

This implementation includes semantic grouping with Section headers, which helps screen readers understand the structure. You can enhance accessibility further by adding .accessibilityLabel() to buttons and toggles with more descriptive labels for VoiceOver users.