Customize TextField

The most commonly used component to insert text is the TextField. We usually use it like this:

struct ContentView: View {
  @State var weight: String
  
  var body: some View {
        VStack {
          TextField("Weigth Kg", text: $weight)
        }
  }
}

This is the classic way, and it’s fine.

Sometimes we need to change the placeholder text color and size, as well as the color and size of the typed text. Take a look at the code below to see how to do it:

struct ContentView: View {
    @State var weight: String = ""
    var body: some View {
        TextField("", text: $weight, prompt: Text("Weight Kg").font(.title).foregroundStyle(.orange)).opacity(0.6)
            .font(.title).foregroundStyle(.green)
    }
}

In this case, the placeholder is replaced by the prompt, while the properties applied to the TextField object change the text’s appearance.