SwiftUI TextField (2024) – Tutorial and Examples

A TextField is a type of control that shows an editable text interface. In SwiftUI, a TextField typically requires a placeholder text which acts similar to a hint, and a State variable that will accept the input from the user (which is usually a Text value).

Basic Code Sample

Ideally you want to add some padding to the TextField so it won’t look weird and small.

TextField(
  "Hint Text",
  text: $textInput
).padding()

Design Tip

It is a good idea to put your TextField inside a Stack and add labels to it. This is because the “Hint” of the TextField will be gone if the user already entered some text. Thus, it might get confusing and harder to recall later on what values needs to be input.

HStack{
  Text("First Name:")
  TextField(
    "Enter First Name..",
    text: $textInput
  ).padding()
}

onEditingChanged

onEditingChanged is an event handler/listener that handles when focus is given or taken for the control.

TextField(
  "Hint Text",
  text: $textInput,
  onEditingChanged: { changed in
    //code here
  }
).padding()

Take note that this event handler only fires when the user enters or loses focus of the control. It does not detect the keystrokes, however, you can opt to check the value of the field before and after if you want to.

onCommit

onCommit is an event handler/listener that handles when the user has finished his entry by pressing the Enter key.

TextField(
  "Hint Text",
  text: $textInput,
  onCommit: {
    //code here
  }
).padding()

this event handler is usually used to double check for any corrections or formatting issues that may be encountered later on when processing the data.

Formatting

Moving on you might have noticed that TextField has a few overloads that accepts Formatter. This is quite an interesting feature because it allows the TextField to accept raw data and convert it to the appropriate Formatter that we set for it.

The basic sample of a formatted textfield is as shown:

TextField(
  "Hint Text",
  value: $rawInput,
  formatter: //add a Formatter
).padding()

Notice that instead of text accepting the input it is now called value. Additionally, it also asks for formatter in which we should provide the appropriate type of Formatter for it.

Say for example we use the NumberFormatter:

TextField(
  "Hint Text",
  value: $rawInput,
  formatter: NumberFormatter()
).padding()

Upon commit the TextField will automatically evaluate if the input is appropriate for the Formatter that we have set. If it is not an acceptable input then it will simply discard it and return to the previous (if available) or default value.

Thus, given the circumstance we should provide the appropriate default value for our formatted TextField, so in our case we can simply set the initial value of $rawInput into 0.

Styling

It is fairly easy to style a TextField in SwiftUI, this is mainly because of the .textFieldStyle protocol that is provided. Generally, it asks for a view of type TextFieldStyle and uses that as reference for the style.

Here is what the basic syntax looks like when adding a style:

TextField(
  "Hint Text",
   text: $textInput,
).textFieldStyle(
//add Style here
)

Thus, it is possible to add a custom style by creating a TextFieldStyle view to be used as a base. As of the moment Apple has provided us with one extra ready to use style, which is namely the RoundedBorderTextFieldStyle()