Skip to main content
Group(children: Component): Group;
Group(children: Component[]): Group;
Group(subviews: Component, transform: (subviews: Component[]) => Component): Group;
​
children
Component | Component[]
required
A single component or array of components to group together.
Subviews overload:
​
subviews
Component
required
A component whose children are decomposed into an array of subviews.
​
transform
(subviews: Component[]) => Component
required
A function that receives the subviews array and returns a new component layout.

​
Support

​
Usage

​
Basic grouping

Group components without adding any layout container: 
Group([
    Text("First"),
    Text("Second"),
    Text("Third")
])

​
Applying modifiers to multiple components

Modifiers applied to a Group propagate to each child: 
Group([
    Text("Red text"),
    Text("Also red")
])
    .foregroundStyle(Color("red"))

​
Conditional rendering

const body = () => {
    const [showDetails, setShowDetails] = useState(false)

    return Group(
        showDetails
            ? [Text("Name"), Text("Email")]
            : [Text("Sign in to view")]
    )
}

​
Subview decomposition

Use the subviews overload to rearrange children of an existing component: 
Group(
    VStack([Text("A"), Text("B"), Text("C")]),
    (subviews) =>
        HStack([subviews[0], Spacer(), subviews[1]])
)

​
Notes

  • Unlike VStack, HStack, or ZStack, Group adds no layout semantics. The children are placed according to the parent container’s layout rules.
  • The subviews transform overload enables view decomposition — inspecting and rearranging the children of an existing component tree into a new layout.

​
See Also