SwiftUI textfield height didn't change

Question

I have a simple TextField and set height and some other properties but the issue is textfield height didn't change, bellow is my code

 struct LoginView: View {

    @State private var email = ""
    @State private var password = ""

    var body: some View {
        VStack() {
            TextField("Email", text: self.$email)
                .frame(height: 55)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .cornerRadius(16)
                .padding([.leading, .trailing], 24)

            SecureField("Password", text: self.$password)
                .frame(height: 55)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .cornerRadius(16)
                .padding([.leading, .trailing], 24)
        }
    }
}
struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()
    }
}

However this doesn't work.

Downall

Answer 1

Lets check it!

import SwiftUI

struct ContentView: View {

    @State private var email = ""
    @State private var password = ""

    var body: some View {
        VStack() {
            TextField("Email", text: self.$email)
                .frame(height: 200).border(Color.red)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .cornerRadius(16)
                .padding([.leading, .trailing], 24)

            SecureField("Password", text: self.$password)
                .frame(height: 55)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .cornerRadius(16)
                .padding([.leading, .trailing], 24)
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

You have to understand how View modifiers work. Any modifier returns new View with modified Content.

see this one :-)

import SwiftUI

struct ContentView: View {

    @State private var email = ""
    @State private var password = ""

    var body: some View {
        VStack() {
            TextField("Email", text: self.$email)
                .frame(height: 200).border(Color.red)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .cornerRadius(16)
                .padding([.leading, .trailing], 24)

            SecureField("Password", text: self.$email)
            .frame(height: 55)
            .textFieldStyle(PlainTextFieldStyle())
            .padding([.leading, .trailing], 4)
            .cornerRadius(16)
                .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray).padding(.bottom, -150).padding(.top, 50))
            .padding([.leading, .trailing], 24)
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

As you can see, the styling of TextField itself is never changed, except you explicitly will change it.

Currently TextFieldStyle public API is very limited

/// A specification for the appearance and interaction of a `TextField`.
@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol TextFieldStyle {
}

You can just select one of predefined ...

DefaultTextFieldStyle
PlainTextFieldStyle
RoundedBorderTextFieldStyle
SquareBorderTextFieldStyle

You are right! You not able to change height of TextField, its height is dependent on Font used to render it, except applying some custom TextFieldStyle It is not documented, and could change in future version ...

UPDATE, based on How to change SwiftUI TextField style after tapping on it? (all credits should go to the author of this question)

Example of custom TextFieldStyle

import SwiftUI

struct ContentView: View {

    @State private var email = ""
    @State private var password = ""

    var body: some View {
        VStack() {
            TextField("Email", text: self.$email)
                .textFieldStyle(MyTextFieldStyle()).border(Color.blue)
        }
    }
}

struct MyTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
        .padding(30)
        .background(
            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .stroke(Color.red, lineWidth: 3)
        ).padding()
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

and final look, which is what you are looking for ...

Mcatee

Answer 2

Use instead plain text field style like below

TextField("Email", text: self.$email)
    .frame(height: 55)
    .textFieldStyle(PlainTextFieldStyle())
    .padding([.horizontal], 4)
    .cornerRadius(16)
    .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
    .padding([.horizontal], 24)

Polypus

please, see my update, and an example of custom TextFieldStyle (it is not my own idea) – Mcatee

Answer 3

I was able to solve this by doing the following:

TextField("Title", text: $model.text, axis: .vertical)
    .lineLimit(5...10)

Musgrove

Answer 4

The way to increase TextField size in SwiftUI is via controlSize. You can't arbitrarily control it, but it gives you some way to increase the height.

VStack {
    TextField(text: $email) {
        Text("Email")
    }
    .controlSize(.small)
    TextField(text: $email) {
        Text("Email")
    }
    .controlSize(.regular)
    TextField(text: $email) {
        Text("Email")
    }
    .controlSize(.large)
}
.textFieldStyle(.roundedBorder)
.frame(width: 270)

Electrotherapeutics

Answer 5

For change height of textField you can use .font() modifier .

TextField("Enter Email", text: $userEmail)
                    .font(.system(size: 50)

Bellbella