Group Field


The group field represents a group of values. This field is best used when there is a single group to be edited, typically with a single JSON object or nested frontmatter values. If there are multiple groups, checkout the group-list field.

Definition

Below is an example of how a group field could be defined in a Gatsby JSON form. Read more on passing in JSON form field options here.

If the source JSON for the example contact info looked like this:

{
  "contact": {
    "email": "hello@tinacms.org",
    "twitter_handle": "tina_cms",
    "github_handle": "tinacms"
  },
}

Our form options would look like this:

const formOptions = {
    label: 'Info Page',
    fields: [
      {
        label:"Contact Info",
        name:"rawJson.contact",
        description: "Contact info",
        component: "group",
        fields: [
          {
            label:"Email",
            name:"email",
            description: "Contact email",
            component: "text"
          },
          {
            label:"Twitter",
            name:"twitter_handle",
            description: "Twitter handle",
            component: "text"
          },
          {
            label:"Github",
            name:"github_handle",
            description: "Github username",
            component: "text"
          }
        ]
      },
      //...
    ]
  }

Options

  • name: The path to some value in the data being edited.
  • component: The name of the React component that should be used to edit this field. Available field component types are defined here
  • label: A human readable label for the field. This label displays in the sidebar and is optional. If no label is provided, the sidebar will default to the name.
  • description: An optional description of the field.
  • fields: An array of group values that will render as a sub-menu.

Interface

import { Field } from '@tinacms/core'

interface GroupConfig {
  name: string
  component: 'group'
  label?: string
  fields: Field[]
}