SwiftUI TextField: A User-Friendly Guide

SwiftUI’s TextField is a powerful user interface element that enables developers to effortlessly capture user input and create interactive experiences in their applications. Whether you’re a seasoned SwiftUI developer or just starting your journey, this blog post will walk you through the ins and outs of SwiftUI TextFields, providing valuable insights, use cases, and code examples along the way. Let’s dive in!

Creating a simple TextField in SwiftUI

To keep things simple, let’s start with the basics of creating a simple TextField in SwiftUI. TextFields are used for capturing text input from the user, such as usernames, passwords, search queries, and more. 

The syntax for creating a TextField is quite straightforward:

struct TextFieldContent: View {
    @State var textInput: String = ""
    
    var body: some View {
        TextField("Enter text here..", text: $textInput)
    }
}

The result:

There you have it, the most straightforward implementation of a TextField in SwiftUI. You have your placeholder text and store the text value in the text input variable called textInput.

SwiftUI TextField border

In SwiftUI, customizing the border of a TextField can be achieved through various methods. We will explore two easy ways of creating a border for your TextField.

The two modifiers we will explore is: .border and .textFieldStyle 

Using .textFieldStyle modifier

If you want your border to match the default color then you can use the .textFieldStyle modifier.

TextField("Enter text here..", text: $textInput)
            .textFieldStyle(.roundedBorder)

The result:

Using .border modifier (TextField border color)

If you want to customize your border a bit more, like i different color then you should use the .border modifier.

Using .border modifier is as straightforward as you think, you simply add is as any other modifier:

TextField("Enter text here..", text: $textInput)
            .border(Color.blue)
            .padding(5)

The result:

And if you want the round corner effect then you can add .cornerRadius like so:

TextField("Enter text here..", text: $textInput)
            .border(Color.blue)
            .cornerRadius(3)
            .padding(5)

The result:

SwiftUI TextField onSubmit 

The onSubmit modifier is used to handle actions triggered when the user hits the Return button (also known as Done or Enter) on the keyboard while editing a TextField. 

This modifier provides a closure where you can execute specific actions or logic, such as dismissing the keyboard, performing a search, or navigating to a new screen after the user submits their input. In this example, we will simply print what’s in the text field:

struct TextFieldContent: View {
    @State var textInput: String = ""
    
    var body: some View {
        TextField("Enter text here..", text: $textInput)
            .onSubmit {
                print(textInput)
            }
    }
}

In the simulator you can either use enter on your keyboard or toggle key simulator keyboard in the downs: I/O → Keyboard → Toggle Software Keyboard

SwiftUI TextField onChange

The onChange modifier in SwiftUI allows you to observe changes to the value of a TextField. Whenever the user modifies the TextField’s text, the closure provided to the onChange modifier is executed. This provides a powerful way to respond to user input immediately and dynamically update the app’s interface accordingly.

struct TextFieldContent: View {
    @State var textInput: String = ""
    
    var body: some View {
        TextField("Enter text here..", text: $textInput)
            .onChange(of: textInput) { newInput in
                print("\(textInput)")
            }
    }
}

Note that newInput and textInput will have the same value.

Great use cases for TextField

Login and Registration Forms

TextField is a fundamental component in login and registration forms, where users input their credentials, such as email and password. By leveraging secure field styles, you can create a seamless and secure login experience.

Search Functionality

TextField serves as a crucial element in search functionalities. By providing a search bar with a TextField, users can search for specific content within your app, such as products, articles, or locations.

Data Entry and Form Filling

In data entry and form-filling scenarios, TextFields are indispensable for collecting various user inputs like names, addresses, phone numbers, and more.

Conclusion

SwiftUI’s TextField is a versatile and powerful tool that enables developers to capture user input and create intuitive user experiences. 

By understanding the basics, customizing with modifiers, and exploring various use cases, you can harness the full potential of SwiftUI TextFields in your iOS and macOS applications. 

So go ahead, experiment, and build user-friendly interfaces that enhance user engagement and satisfaction. 

Scroll to Top