<FieldTab>

Group fields in a tab. Use it in renderFields or the fields override.

Conditions:

Tabs are shown in the order they’re rendered.
Tabs within tabs aren’t supported.

import { FieldTab } from "@puckeditor/core";
 
const config = {
  components: {
    Example: {
      fields: { title, size, weight },
      renderFields: ({ fields }) => (
        <>
          <FieldTab label="Content">{fields.title}</FieldTab>
          <FieldTab label="Style">
            {fields.size}
            {fields.weight}
          </FieldTab>
        </>
      ),
      // ...
    },
  },
};

Props

Param	Example	Type	Status
`label`	`label: "Content"`	String	Required
`children`	`children: <input />`	ReactNode	-
`value`	`value: "content"`	String \| Number	-

Required props

`label`

The text shown in the tab row.

Optional props

`children`

The content to render when the tab is selected, like fields.

`value`

A unique value for the tab. Defaults to label.

Used in ui.fieldTab when this tab is selected.