How to make the SwiftUI textfield roundedBorder to be a capsule border

I like the roundedBorder style, but I want to make it more round like a capsule. How to do this?

Answered by Vision Pro Engineer in 800573022

Hi @NahtanMak ,

Try styling it by creating a struct that conforms to TextFieldStyle, like this:

struct CapsuleTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding()
            .background(.thickMaterial)
            .foregroundColor(.white)
            .cornerRadius(30)
            .font(.headline)
    }
}

Hi @NahtanMak ,

Try styling it by creating a struct that conforms to TextFieldStyle, like this:

struct CapsuleTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding()
            .background(.thickMaterial)
            .foregroundColor(.white)
            .cornerRadius(30)
            .font(.headline)
    }
}
How to make the SwiftUI textfield roundedBorder to be a capsule border
 
 
Q