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.

Options

import { Field } from '@tinacms/core'

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

This interfaces only shows the keys unique to the group field. Visit the Field Config docs for a complete list of options.

Definition

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

{
  "contact": {
    "email": "hello@tinacms.org",
    "twitter_handle": "tinacms",
    "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',
        },
      ],
    },
    //...
  ],
}