Custom TextField Style in SwiftUI

This repo describes how to make a custom TextField style, which you can apply to any text field. It is in response to the wonderful iOS design course’s Module 1 Challenge 5 from CodeWithChris:

Shows you how to create a re-useable style like the below to apply to your TextFields Custom text field

Custom TextField Style

Define a custom TextField style including the name of a system image in a separate file, e.g. GradientTextFieldBackground.swift:

import SwiftUI

struct GradientTextFieldBackground: TextFieldStyle {
    let systemImageString: String
    // Hidden function to conform to this protocol
    func _body(configuration: TextField<Self._Label>) -> some View {
        ZStack {
            RoundedRectangle(cornerRadius: 5.0)
                        colors: [
                        startPoint: .leading,
                        endPoint: .trailing
                .frame(height: 40)
            HStack {
                Image(systemName: systemImageString)
                // Reference the TextField here

Call Custom TextField Style

You use the .textFieldStyle modifier on the TextField in order to deploy this custom background for the TextField:

struct ContentView: View {
    @State var name = ""
    @State var email = ""
    var body: some View {
        VStack {
            // MARK: - Name TextField
            TextField("Name", text: $name)
                        systemImageString: "person"
            // MARK: Email TextField
                TextField("Email", text: $email)
                            systemImageString: "envelope"


View Github