The InlineGroup represents a collection of inline fields. It serves as a wrapper for providing additional UI for inline elements outside of blocks. This group provides its own simple controls — exposing the ability to display a modal with additional form fields.

Definition

Below is an example of how InlineGroup may be used in an Inline Form.

import { useForm, usePlugin } from 'tinacms'
import {
  InlineForm,
  InlineGroup,
} from 'react-tinacms-inline'

// Example 'Hero' Component
export function Hero(props) {
  const [data, form] = useForm(props.data)

  usePlugin(form)

  return (
    <InlineForm form={form}>
      <InlineGroup
        name="hero"
        fields={[
          {
            name: 'typography.style',
            label: 'Type Style',
            description: 'Select a type style for the hero copy',
            component: 'select',
            options: ['Swiss-Style','Art-Nouveau', 'Command-Line'],
          },
          {
            name: 'typography.color',
            label: 'Type Color',
            description: 'Select a color for the hero copy',
            component: 'color'
            widget: 'block'
            colors: ['#404040', '#ff0000', '#1B1E25'],
          },
        ]}
        >
          <HeroCopy typography={data.hero.typography}>
            <InlineText focusRing={false} name="heroCopy" />
          </HeroCopy>
      </InlineGroup>
    </InlineForm>
  )
}

This example assumes your data looks something like this:

{
  "hero": {
    "heroCopy": "Call me Ishmael",
    "typography": {
      "style": "Swiss-Style",
      "color": "#1B1E25"
    }
  }
}

Options

Interface

interface InlineGroupProps {
  name: string
  fields: TinaField[]
  insetControls?: boolean
  focusRing?: false | FocusRingProps
  children?: any
}

interface FocusRingProps {
  offset?: number | { x: number; y: number }
  borderRadius?: number
}