How it works
A Form is a container view that groups controls people use to enter data or adjust settings. It applies platform-appropriate styling to the views you place inside it, so labels, text fields, toggles, and sliders are laid out and decorated to match the conventions of a settings or data-entry screen on each platform. Reach for Form whenever you're building a screen made largely of input controls rather than arranging that chrome by hand.
Wrap your controls in a Form
Formtakes a view-builder closure and renders its contents as a styled list of rows. You place ordinary controls directly inside it, as in the example where aFormcontains theTextField,Toggle, andSlider; the form is responsible for the spacing, separators, and overall appearance around them.Group related rows with Section
Inside a
Form, aSectioncollects related controls and can carry a header. The example uses oneSection(header: Text("Profile"))for theusernameandnotificationscontrols and a secondSection(header: Text("Audio"))for thevolumeslider, which renders as visually distinct grouped blocks with titled dividers.Bind controls to state
Formdoesn't own your data; each control reads and writes through a binding. Here the rows bind to@Statevalues via$username,$notifications, and$volume, so editing a field in the form updates the backing property and re-renders the view.Adjust appearance with formStyle
The look of a
Formis governed by its form style, which you can change with the.formStyle(_:)modifier (for example.formStyle(.grouped)). This lets the same control hierarchy adopt different presentations without you restructuring theSectionand row layout.
Audio section, such as Toggle("Mute", isOn: $notifications), and watch Form automatically extend the grouped section with a matching divider and inset.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 FormDemo: View {
@State private var username = "Ada"
@State private var notifications = true
@State private var volume = 0.5
var body: some View {
Form {
Section(header: Text("Profile")) {
TextField("Username", text: $username)
Toggle("Notifications", isOn: $notifications)
}
Section(header: Text("Audio")) {
Slider(value: $volume)
}
}
}
}