<FieldGroup>

Render a set of fields in a group.

Use it in renderFields and the fields override to create logical groupings.

import { Puck, FieldGroup } from "@puckeditor/core";
 
export function Editor() {
  return (
    <Puck>
      <FieldGroup label="Appearance">
        <FieldGroup.Item>
          <input type="text" value="#000000" onChange={() => {}} />
        </FieldGroup.Item>
        <FieldGroup.Item>
          <input type="number" value="12" onChange={() => {}} />
        </FieldGroup.Item>
      </FieldGroup>
    </Puck>
  );
}

Props

Param	Example	Type	Status
`children`	`children: <div />`	ReactNode	-
`collapsible`	`collapsible: false`	Boolean	-
`defaultExpanded`	`defaultExpanded: true`	Boolean	-
`icon`	`icon: <svg />`	ReactNode	-
`id`	`id: "appearance"`	String	-
`label`	`label: "Appearance"`	String	-
`variant`	`variant: "card"`	`"flush"` \| `"card"`	-

Optional props

`children`

The fields to render inside the group. Will likely contain <FieldGroup.Item> nodes. Nothing is rendered if there are no children, or only empty strings.

`collapsible`

Let users show and hide the children by clicking the label. Defaults to true.

<FieldGroup label="Appearance" collapsible={false}>
  <FieldGroup.Item>
    <input type="text" value="#000000" onChange={() => {}} />
  </FieldGroup.Item>
</FieldGroup>

`defaultExpanded`

Expand the children by default. Only applies when collapsible is true. Defaults to false.

<FieldGroup label="Appearance" defaultExpanded>
  <FieldGroup.Item>
    <input type="text" value="#000000" onChange={() => {}} />
  </FieldGroup.Item>
</FieldGroup>

`icon`

Render an icon before the label text. Puck uses lucide-react internally.

`id`

An optional ID for this group, used as the key in ui.expandedFieldGroups. Use it to preserve the group’s expanded state across remounts.

This prop has no effect outside <Puck>.

`label`

The label for the group. Required unless collapsible is false.

`variant`

The visual style of the group. Defaults to "flush".

"flush" (default): render the fields without a container. Nested groups are indented.
"card": render the fields inside a bordered container.

<FieldGroup.Item>