Contents

GroupBox

A stylized view, with an optional label, that visually collects a logical grouping of content.

Declaration

struct GroupBox<Label, Content> where Label : View, Content : View

Overview

Use a group box when you want to visually distinguish a portion of your user interface with an optional title for the boxed content.

The following example sets up a GroupBox with the label “End-User Agreement”, and a long agreementText string in a Text view wrapped by a ScrollView. The box also contains a Toggle for the user to interact with after reading the text.

var body: some View {
    GroupBox(label:
        Label("End-User Agreement", systemImage: "building.columns")
    ) {
        ScrollView(.vertical, showsIndicators: true) {
            Text(agreementText)
                .font(.footnote)
        }
        .frame(height: 100)
        Toggle(isOn: $userAgreed) {
            Text("I agree to the above terms")
        }
    }
}

[Image]

Topics

Creating a group box

Creating a group box from a configuration

Deprecated initializers

See Also

Grouping views into a box