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:
What I want instead is shown in the image below:
This design gives a little more padding around the placeholder text and enhances the visual design.
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: