Read text from a TextField in SwiftUI

In this tutorial, we will see how to read text from a TextField in SwiftUI.

In SwiftUI, text input from a TextField can be managed by binding it to a @State property. This binding ensures that as users type into the TextField, the associated property is automatically updated with the entered text.

Read text using the Text view

We can read the text from a TextField using a Text view. We can use a combination of the @State property wrapper to store the text and a Text to display it.

Now follow the steps below to do that.

Create a @State property

First of all, I will create a @State property that will store the text entered in the TextField by users.

@State private var userInput: String = ""

Here, we use the @State property wrapper to create a variable called userInput that will hold the text entered in the TextField. The private keyword is used to limit access to the variable within the scope of the ContentView.

Create a TextField

Now, I will create a TextField where users can input text, and I will bind this TextField to the userInput property.

TextField("Type here", text: $userInput)
    .textFieldStyle(RoundedBorderTextFieldStyle())

The TextField is created with a placeholder text (“Type here“). The text parameter is bound to the userInput variable using the $ symbol. This creates a two-way binding between the text field and the state variable, that means any changes in the text field will update the state variable.

Access the entered text input

The text entered by the user is accessible via the userInputproperty. We have to utilize this in a Text view to display the entered text.

Text("You wrote:" \(userInput)")

Here, we display the entered text using a Text view. The entered text is dynamically updated as the user types into the TextField due to the two-way binding.

Here is the complete code below.

import SwiftUI

struct ContentView: View {
    @State private var userInput: String = ""
    
    var body: some View {
        VStack {
            TextField("Type here", text: $userInput)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            
            Text("You wrote: \(userInput)")
                .font(.headline)
                .padding()
        }
    }
}

The above code will create a TextField, whenever we write in the TextField the Text view below the TextField will show the entered text in real-time.

Output:

You can also check out the link to Create TextField in SwiftUI

Read text on a button tap

To read the text from a TextField on a button tap in SwiftUI, we can use a combination of a @State variable to store the text and a Button with an action that will show the text when we press it.

Example

Button("Read Text") {
    print("Text input: \(textInput)")
}

In the above code, I have used the print statement to print the text input that is stored in the @State variable textInput into the button action. So, whatever user type in the TextField it will print the typed text in the console.

Here is the complete code below.

import SwiftUI

struct ContentView: View {
    @State private var userInput: String = ""
    
    var body: some View {
        TextField("Enter text", text: $userInput)
            .textFieldStyle(RoundedBorderTextFieldStyle())
        
        Button("Get Text") {
            print("You wrote: \(userInput)")
        }
    }
}

Output:

Display text from TextField on button click

We can also display the text on the screen instead of printing it in the console after clicking the button.

For that we need to update a @State variable within the button’s action closure. Then we can use the Text view to display that updated variable’s value on the screen when we click the button.

Example

import SwiftUI

struct ContentView: View {
    // To store the input from TextField
    @State private var textInput: String = ""
    // To store the text to be displayed on the screen
    @State private var displayedText: String = ""

    var body: some View {
        VStack {
            TextField("Enter text", text: $textInput)
                .padding()

            // Button to read the text input and update displayedText
            Button("Read Text") {
                // Update the displayed text when the button is tapped
                displayedText = textInput
            }
            .padding()

            // To display the text entered by the user
            Text("You wrote: \(displayedText)")
                .font(.headline)
                .padding()
        }
        .padding()
    }
}

In the above program, I have created the @State variable displayedText to store the text that will be displayed when we tap the button.

Inside the button action, I have updated the displayedText with the value of textInput . So, when we tap the button, this action updates displayedText with the content entered in the TextField.

Then, I have used the Text view below the button to display the content of displayedText , which gets updated with the text from the TextField after the button is clicked.

Output: