Adjust the Text Field Keyboard Type in SwiftUI

Written by Team Kodeco

One benefit of using a TextField in SwiftUI is the ability to customize the virtual keyboard presented to the user. This feature enhances the user experience by showing only the most relevant characters for the given input field.

Keyboard Type

You can specify the type of virtual keyboard by using the keyboardType modifier with a TextField view. For instance, to display a keypad optimized for phone numbers:

For example, here’s how to display a keypad optimized for entering phone numbers:

struct ContentView: View {
  @State private var cell = ""
  var body: some View {
    TextField("Enter your cell number", text: $cell)
      .multilineTextAlignment(.center)
      .keyboardType(.phonePad)
  }
}

Here’s what this looks like in the simulator:

In the code above, you create a @State variable named cell to receive the user’s input, then create a TextField showing placeholder text and binding to cell. The multilineTextAlignment(.center) brings the view into the center of the screen. Finally, you use .keyboardType with .phonePad to show a simplified numeric keypad when the user taps into the view.

Here are some more examples of commonly used UIKeyboardType keyboard types:

• .default: a standard keyboard with full character set
• .numberPad: a numeric keypad with additional mathematical symbols
• .emailAddress: a keyboard with special characters for entering email addresses
• .webSearch: a keyboard with convenient search-related buttons

Ensure that the chosen keyboard type aligns with the expected user input to avoid user confusion.

Note: The keyboard type does not enforce input constraints. For instance, using .emailAddress does not validate the entered string as a valid email address. You must handle input validation separately.

Submission Label

SwiftUI provides the SubmitLabel structure to specify the label for the submission action in your view hierarchy. These labels change the appearance of the “Return” key on the virtual keyboard to better match the expected action, providing a clear visual hint to users.

struct ContentView: View {
  @State private var name = ""
  var body: some View {
    TextField("Enter your name", text: $name)
      .keyboardType(.default)
      .submitLabel(.done)
      .onSubmit {
        print("Name entered: \(name)")
      }
  }
}

Here’s what this looks like in the simulator:

In this example, the submitLabel modifier with .done changes the “Return” key to display “Done”. When pressed, it triggers the onSubmit action and prints the entered name.

SubmitLabel provides several predefined labels representing common actions: .continue, .done, .go, .join, .next, .return, .route, .search and .send.

Incorporating these features can make text input in your SwiftUI apps more interactive and user-friendly.