SwiftUI TextField complete tutorial

TextField in SwiftUI is a simple control that shows an editable text interface (equivalent to UITextField in UIKit). Because TextField allows a user to type text, it also needs a way of storing the entered text in a State variable which can then be used to read the input. The appearance of TextField can further be customized by using TextFieldStyle.

This is a second post in a series which explores SwiftUI’s built in views and controls. In previous tutorial we learned everything about SwiftUI’s Text View.

In order to initialize a TextField, you need to pass in a placeholder string and a binding to a @State variable which will store the value entered in the TextField. The following example also includes a way of reading the value out of the State variable and showing it in a Text view:

struct ContentView: View {
    @State var username: String = ""
    
    var body: some View {
        VStack(alignment: .leading) {
            TextField("Enter username...", text: $username)
            Text("Your username: \(username)")
        }.padding()
    }
}

There is a more advanced way of initializing a TextField with onEditingChanged and onCommit callbacks:

struct ContentView: View {
    @State var username: String = ""
    
    var body: some View {
        VStack(alignment: .leading) {
            TextField("Enter username...", text: $username, onEditingChanged: { (changed) in
                print("Username onEditingChanged - \(changed)")
            }) {
                print("Username onCommit")
            }
            
            Text("Your username: \(username)")
        }.padding()
    }
}

The onCommit callback gets called when user taps return. The onEditingChanged is a little bit more tricky and gets called when user taps on the TextField or taps return. The changed value is set to true when user taps on the TextField and it’s set to false when user taps return.

Styling TextField

Add a border to a TextField using .textFieldStyle() modifier and RoundedBorderTextFieldStyle() value:

TextField("Enter username...", text: $username)
    .textFieldStyle(RoundedBorderTextFieldStyle())

Change input text color using .foregroundColor() modifier:

TextField("Enter username...", text: $username)
    .foregroundColor(Color.blue)

Change background color of a TextField using .background() modifier:

TextField("Enter username...", text: $username)
    .background(Color.blue)

Add a text label above the TextField using VStack:

VStack(alignment: .leading) {
    Text("Username")
        .font(.callout)
        .bold()
    TextField("Enter username...", text: $username)
        .textFieldStyle(RoundedBorderTextFieldStyle())
}.padding()
Text label above the TextField in SwiftUI
Text label above the TextField in SwiftUI

Add a text label next to the TextField using HStack:

HStack(alignment: .center) {
    Text("Username:")
        .font(.callout)
        .bold()
    TextField("Enter username...", text: $username)
        .textFieldStyle(RoundedBorderTextFieldStyle())
}.padding()
Text label next to the TextField in SwiftUI
Text label next to the TextField in SwiftUI

Related tutorials:

Check out Apple’s official documentation of TextField to learn more.

Questions, comments or suggestions? Follow us on Twitter @theswiftguide