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

Question

NahtanMak OP

Created Aug ’24

Replies 1

Boosts 0

Participants 2

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

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)
    }
}

Boost

Answer 1

Vision Pro Engineer OP

Apple

Aug ’24

Recommended

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)
    }
}

0