Customize the submit button for TextField and SecureField in SwiftUI

In this tutorial, we will see how to customize the submit button for TextField and SecureField in SwiftUI. Actually we can only change the label of that button.

In SwiftUI, we can edit the label of “return” button on the keyboard for TextField and SecureField by using the submitLabel() modifier.

We have to simply choose and pass our preferred label as an argument into this (submitLabel() ) modifier.

Example

.submitLabel(.search)

We can directly apply this modifier to the TextField or SecureField , this will replace the return key of the keyboard with search.

SwiftUI provides lots of different button options (labels) that we can use instead of return, so it better matches the button action.

• done
• go
• continue
• route
• search
• return
• send
• next
• join

We can choose any option we want and pass it into the sumbitLabel() modifier as an argument to customize the label of the submit button.

Customize the submit button for TextField

In SwiftUI, we can customize the return key of a TextField using the submitLabel() modifier to display different labels such as “go“, “search“, “done“, etc.

Example

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        TextField("Enter text", text: $text)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            // Change the submit button label to done
            .submitLabel(.done)
    }
}

In the above program, I have applied the .submitLabel() modifier on the TextField and passed .done as an argument, that will change the return key of the TextField to done.

Output:

Customize the submit button for SourceField

We can also apply the submitLabel() modifier on the SourceField to customize the label of the return key of the keyboard.

Example

import SwiftUI

struct ContentView: View {
    @State private var secureText: String = ""

    var body: some View {
        SecureField("Enter secure text", text: $secureText)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            // Change the submit button label to done
            .submitLabel(.join)
    }
}

In the above program, I have passed .join as an argument into the .submitLabel() modifier, that will set the return key of the TextField to join.

Output: