SwiftUI.cc
Patterns
PatternFormsBeginner

SwiftUI Login Screen

A reusable login screen with email and password fields, and a login button.

Updated 2026-06
Basic Login Screen with Email and Password
import SwiftUI

struct LoginScreen: View {
    @State private var email = ""
    @State private var password = ""
    
    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Login")) {
                    TextField("Email", text: $email)
                        .autocapitalization(.none)
                        .keyboardType(.emailAddress)
                    SecureField("Password", text: $password)
                }
                
                Section {
                    Button(action: login) {
                        Text("Login")
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color.blue)
                            .cornerRadius(8)
                    }
                    .disabled(email.isEmpty || password.isEmpty)
                }
            }
            .navigationTitle("Sign In")
        }
    }
    
    private func login() {
        // Handle login logic here
        print("Email: $email), Password: $password)")
    }
}

#Preview {
    LoginScreen()
}

How It Works

This login screen is built using SwiftUI’s Form, TextField, and SecureField to collect user credentials. The @State property wrapper manages the email and password input fields, ensuring the UI updates when the user types. The login button is only enabled when both fields contain text, improving UX by preventing invalid submissions.

The NavigationStack provides a navigation context so the screen can be embedded in a larger navigation flow, and the Form organizes the input fields into a clean, structured layout. SecureField is used for the password to obscure input and improve security.

Customization

Parameter Where to change Example values
Email placeholder TextField("Email", text: $email) "Enter your email"
Password placeholder SecureField("Password", text: $password) "Enter your password"
Button color .background(Color.blue) .green, .accentColor()
Corner radius .cornerRadius(8) 4, 10
Field validation `disabled(email.isEmpty

Accessibility Notes

This component includes semantic structure with labels and disabled states to support VoiceOver. Consider adding accessibilityLabel and accessibilityHint modifiers to improve accessibility for visually impaired users.