> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Group

> The `Group` control allows you to define and visually edit a group of properties and replaces the deprecated [Shape](/developer/docs/reference/controls/deprecated/shape) control.

The `Group` control allows you to define and visually edit a group of properties and replaces the deprecated [Shape](/developer/docs/reference/controls/deprecated/shape) control.

![A Group control for a banner within a Header component](/_fern-img/3e72f3dc89f883ed676daa339c17317db140d985a966e2589e78ad464c51932e.webp)

## Params

**`label`** `string` — default: Group

Text for the panel label in the Makeswift Visual Builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

**`preferredLayout`** ` Group.Layout.Inline | Group.Layout.Popover`

The preferred layout for the group in the Makeswift Visual Builder. Note that the builder may override this preference to optimize the user experience. Possible values include:

* `Group.Layout.Inline`: Renders the group properties within the parent panel, visually grouping them to reflect the hierarchy. This is the default if no explicit value is provided.
* `Group.Layout.Popover`: Renders the group properties in a standalone popover panel.

---

**`props`** `Record<string, Control>` — required

An object mapping of prop names to Makeswift
[controls](/developer/docs/get-started/concepts#controls) representing the properties being
grouped. This can include any of the Makeswift controls, including other
groups.

---

## Prop type

The `Group` control passes an `object` based on the controls defined in the `props` field. The keys of the object match the keys in the `props` field, and the values are based on the corresponding control's prop type.

## Example

This example adds a `Group` control to represent the properties of a banner within a Header component.

![A Group control for a banner within a Header component](/_fern-img/2c596db03576f445a9dc0134a75eb4f4cf5c2ce84ee3863cf03aa1460a4b86a5.webp)

**`Header.makeswift.ts`**

```tsx Header.makeswift.ts
import { Group, Color, TextInput, Style } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Header } from "./Header";

runtime.registerComponent(Header, {
  type: "header",
  label: "Header",
  props: {
    className: Style(),
    banner: Group({
      label: "Banner properties",
      preferredLayout: Group.Layout.Popover,
      props: {
        text: TextInput({ defaultValue: "Banner text" }),
        background: Color({ label: "Background", defaultValue: "black" }),
      },
    }),
    heading: TextInput({ label: "Heading", defaultValue: "Heading text" }),
  },
});
```

**`Header.tsx`**

```tsx Header.tsx
interface HeaderProps {
  banner: {
    text: string;
    background: string;
  };
  heading: string;
  className: string;
}

export function Header({ banner, heading, className }: HeaderProps) {
  return (
    <div className={className}>
      <div className="p-20" style={{ backgroundColor: banner.background }}>
        <p className="text-center">{banner.text}</p>
      </div>
      <h1>{heading}</h1>
    </div>
  );
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).