SwiftUI Login Screen
A reusable login screen with email and password fields, and a login button.
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.