Disable textfield in SwiftUI

In this tutorial, we will see how to disable TextField in SwiftUI.

A disabled TextField is useful when we don’t want users to change its text. This is helpful for showing information that should not be edited.

So, we can guide users through a form, or control input based on certain conditions.

Now, follow the methods below to achieve this task.

Using the disabled() modifier

We can apply the disabled() modifier to the TextField, and pass the boolean value true within this modifier to make a TextField disabled or uneditable.

Example

import SwiftUI

struct ContentView: View {
@State var textField = ""

var body: some View {
    TextField("TextField Disabled", text: $textField)
        .font(.title)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding()
        .disabled(true) //To disable the TextField
    }
}

In the above program, I have applied the disabled() modifier with a value of true to the TextField. So, the above program will disable the user interaction with the TextField.

Output:

Dynamically control disabling

Now, I will create a @State variable to dynamically control the disabled state of the TextField. I will also use a Toggle switch to dynamically disable or enable the TextField.

So, when the toggle is on, the TextField becomes editable, and when the toggle is off, the TextField is disabled.

Example

import SwiftUI

struct ContentView: View {
    // To store the text entered into the TextField
    @State private var textField = ""
    // To control the disable state of the TextField
    @State private var isDisabled = true
    
    var body: some View {
        VStack {
            TextField("TextField Disabled", text: $textField)
                //To enable or disable TextField dynamically based on isDisabled state
                .disabled(isDisabled)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
            Toggle("Enabe/Disable", isOn: $isDisabled)
        }
        .font(.title)
        .padding()
        
    }
}

In the above code, I have created a @State variable called isDisabled and used a Toggle switch to dynamically enable and disable the TextField based on the isDisabled variable.

Output:

Conditionally enable the disabled TextField

In SwiftUI, we can control the interaction of the TextField dynamically using the disabled() modifier and the boolean conditions. We can use the @State variables to track conditions, and can enable or disable TextFields based on these variable values.

Now, we will create a dynamic form with three text fields that will be enabled or disabled based on certain conditions, like typing in one TextField or pressing return can trigger the enabling of the next TextField.

Example

import SwiftUI

struct ContentView: View {
    @State private var firstTextField = ""
    @State private var secondTextField = false
    @State private var thirdTextField = false

    var body: some View {
        VStack {
            TextField("TextField 1", text: $firstTextField, onCommit: {
                // Enable the second TextField when return key is pressed
                secondTextField = true
            })

            TextField("TextField 2", text: .constant(""), onCommit: {
                // Enable the third TextField when return key is pressed
                thirdTextField = true
            })
            .disabled(!secondTextField) // Enable/disable based on condition

            TextField("TextField 3", text: .constant(""))
                .disabled(!thirdTextField) // Enable/disable based on condition
        }
        .font(.title)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding()
    }
}

The above code will create three text fields. The first one is enabled, we can interact with it.

So, when we type on it and press enter, it will enable the second TextField.

Similarly, when we type in the second field and press enter, it will enable the third TextField.

Each field depends on the previous one for activation.

Output: