Lesson 2: SwiftUI TextFields and SecureFields

TextFields and SecureFields are used for data entry fields such as form fields and passwords (SecureField).

Basic TextField

The TextField is embedded in a Form for grouping of controls used for DataEntry. It has a placeholder string as the first parameter and a text parameter that holds a binding string which holds a State Variable (@State var ) which will hold what is entered in the TextField.

    @State var firstname: String = ""
    
    var body: some View {
        Form {
            TextField("First Name", text: $firstname)
        }
    }

TextField with padding styling

The .padding() style will add padding around the TextField component. By default padding is set to all for sides of the component. You can specify a padding size by putting a number inside the parenthesis. You can also specify a side to pad by using the values listed below inside the parenthesis after TextField:

  • .bottom
  • .top
  • .leading (Left)
  • .trailing (Right).

In this code I used the Section component to separate sections of the Form. I reused the State variable just for simplicity. In a real application you would create a @State variable for all TextFields.

    @State var firstname: String = ""
    
    var body: some View {
        Form {

            Section
            {
                TextField("First Name", text: $firstname)
                .padding()
            }
            
            Section
             {
                 TextField("First Name", text: $firstname)
                 .padding(25)
             }
            
            Section
            {
                TextField("First Name", text: $firstname)
                .padding(.bottom)
            }
            
            Section
            {
                TextField("First Name", text: $firstname)
                .padding(.top)
            }
            
            Section
             {
                TextField("First Name", text: $firstname)
                .padding(.leading)
             }
            
            Section
             {
                TextField("First Name", text: $firstname)
                .padding(.trailing)
             }

        
        
        }
    }

TextField with Background Color styling

The background style allows you to change the background color of the TextField.

@State var firstname: String = ""
    
var body: some View {
        Form {
            Section
            {
                TextField("First Name", text: $firstname)
                .padding()
                .background(Color(red:239/255,green:245/255,blue:250/255))
            }
                 
        }
    }

TextField with border styling

The border style allow you to specify a border for the TextField

@State var firstname: String = ""
    
    var body: some View {
        Form {

            Section
            {
                TextField("First Name", text: $firstname)
                .padding()
                .border(Color.red)
            }
                 
        }
    }

TextField with RoundedBorderTextFieldStyle()

The textFieldStyle allows you to add preset styles to the TextField. The RoundedBorderTextField Style adds a rounded border to the TextField.

 @State var firstname: String = ""
    
    var body: some View {
        Form {

            Section
            {
                TextField("First Name", text: $firstname)
                .padding()
                   
            }
            Section
            {
                TextField("First Name", text: $firstname)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
                   
            }

                 
        }

TextField foregroundColor style

The foregroundColor style allows you to change the color of the input text.

    @State var firstname: String = ""
    
    var body: some View {
        Form {

            Section
            {
                TextField("First Name", text: $firstname)
                .padding()
                    .foregroundColor(.blue)
                   
            }

                 
        }
    }

SecureFields

The SecureField is used to enter private text. All of the styling that can be applied to the TextField can be applied to the SecureField.

   @State var password: String = ""
    
    var body: some View {
        Form {

            Section
            {
                SecureField("Password", text: $password)
                .padding()

            }

                 
        }
    }

Recommended Books