Create TextField in SwiftUI

In this tutorial, we will see how to create a TextField and add border and padding to the text field in SwiftUI.

A TextField is a view in SwiftUI that is used to generate a text input field where we can enter and modify text. We can interact with the TextField view by typing, editing, and submitting text-based information.

Now, have a look at the approaches below to create an interactive TextField.

Create TextField

We can create a TextField by using a TextField view that will allow us to enter and edit text.

Now, have a look at the example below.

import SwiftUI
 
struct ContentView: View {
    // Creating a state variable 'text' to hold user input
    @State private var text: String = ""
 
    var body: some View {
        // Create a TextField view and bind it to the 'text' variable
        TextField("Enter text here", text: $text)
    }
}

In the above program, I have declared a mutable state property using the @State property called text to hold the value entered in the TextField.

Then, the TextField view is used to create a text field. The TextField takes two parameters, the first one is a placeholder string (“Enter text here“) and the other one is a binding to the text property using the $ prefix. This binding allows the TextField to display and update the value of the text property.

Output:

Add border to the TextField

We can use the border modifier to add a border to a TextField or any other view. We can specify the color and width of the border in this border() modifier.

Example

import SwiftUI
 
struct ContentView: View {
    @State private var text: String = ""
 
    var body: some View {
        TextField("Enter text here", text: $text)
            // Add a rounded border style to the TextField
            .border(.mint, width: 2)
    }
}

In the above program, I have applied the border modifier to the TextField and passed the color .mint and width 2 as arguments to create a mint-colored border around the text field.

Output:

Add padding to TextField

As we can see in the above output the TextField and border are not looking so good. Now, I will add some padding to make the TextField more attractive.

import SwiftUI
 
struct ContentView: View {
    @State private var text: String = ""
 
    var body: some View {
        TextField("Enter text here", text: $text)
        
            .padding() // To add internal padding to the TextField
            .border(.mint, width: 2)
            .padding() // To add external padding around the TextField
    }
}

The above code will display a TextField  with some internal and external padding and a mint-colored border around it.

Output:

Add border using the textFieldStyle() modifier

We can also add border to the TextField using the .textFieldStyle() modifier and specifying the border style provided by SwiftUI (like .roundedBorder) as an argument to this modifier.

Example

import SwiftUI
 
struct ContentView: View {
    @State private var text: String = ""
 
    var body: some View {
        TextField("Enter text here", text: $text)
        
            // Add a rounded border style to the TextField
            .textFieldStyle(.roundedBorder)
            .padding()
    }
}

In the above program, I have specified .roundedBorder style as an argument to the .textFieldStyle() modifier to add a rounded rectangle-shaped border around the TextField.

Output: