swiftswiftuitextfield

How do I increase the height of a textfield that is using the RoundedBorderTextFieldStyle?


When I was making a SwiftUI app for macos, I wanted to have a textfield that used both the RoundedBorderTextFieldStyle and be slightly larger than regular.

I specifically wanted the visual effect that this RoundedBorderTextFieldStyle gives you.

I tried using the scale effect but this made the font size too large. Also making my own text field style didn't have the same selection focus effect that I wanted.

 TextField("Username", text: $username)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding(8)
        .scaleEffect(1.1) //Didn't work as I wanted
        .focused($focusedField, equals: .username)
        .onAppear() {
            focusedField = .username
        }
        .onSubmit {
            submitCredentials()
        }

Using the above code resulted in the image below:

enter image description here

What I want instead is shown in the image below:

enter image description here

This design gives a little more padding around the placeholder text and enhances the visual design.


Solution

  • To make the TextField taller, you can use the .controlSize(.large) modifier:

    struct TestView: View {
        @State private var username = ""
        
        var body: some View {
            TextField("Username", text: $username)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(8)
                .controlSize(.large)
        }
    }
    

    Result:

    enter image description here