How it works
RoundedBorderTextFieldStyle is a concrete TextFieldStyle that draws a text field inside a thin, rounded rectangular border — the familiar bordered input box seen throughout macOS and iOS forms. Rather than styling a TextField by hand with overlays and shapes, you apply this built-in style to get the platform's standard bordered appearance and its automatic light- and dark-mode adaptation. Reach for it when you want an editable field to read clearly as a distinct, tappable input region, especially in dense forms where several fields sit close together.
Apply it through the textFieldStyle(_:) modifier
Text field styles aren't set directly on the field — you pass an instance to the textFieldStyle(_:) modifier, which propagates the style to the TextField it wraps. Here
.textFieldStyle(RoundedBorderTextFieldStyle())attaches the rounded-border treatment to theTextField("Enter your name", text: $name)directly above it.Construct the style with its parameterless initializer
RoundedBorderTextFieldStyle has a single initializer that takes no arguments, so you create it as
RoundedBorderTextFieldStyle(). The look — border thickness, corner radius, and background fill — is supplied by the system, which is what keeps fields consistent with the host platform instead of something you configure on the type itself.Conformance to TextFieldStyle is what makes it accepted
The struct conforms to the TextFieldStyle protocol, which is precisely the type that textFieldStyle(_:) expects. That conformance is why
RoundedBorderTextFieldStyle()can stand in the same modifier slot as.plainor.automatic, letting you swap the field's entire appearance by changing one value.The style shapes appearance, not data flow
Applying the style changes only how the field is drawn; the binding still drives the text. The
$namebinding into@State private var namecontinues to feed edits back into the view — visible here whereText("Hello, \(name.isEmpty ? "stranger" : name)!")updates as you type into the bordered field.
RoundedBorderTextFieldStyle() to .plain in the .textFieldStyle(...) call and watch the rounded border and inset box disappear, leaving the same editable text with no visible frame.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct RoundedBorderTextFieldStyleDemo: View {
@State private var name = ""
var body: some View {
VStack(alignment: .leading, spacing: 12) {
Text("Full Name")
.font(.caption)
.foregroundStyle(.secondary)
TextField("Enter your name", text: $name)
.textFieldStyle(RoundedBorderTextFieldStyle())
Text("Hello, \(name.isEmpty ? "stranger" : name)!")
.font(.headline)
}
.padding()
}
}