Inline Group

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.


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

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

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


  return (
    <InlineForm form={form}>
            name: '',
            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" />

This example assumes your data looks something like this:

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


nameThe path to some value in the data being edited. If no value is provided, the child fields will reference the root of the source file.
fieldsAn array of Tina Fields to display in a settings modal form.
insetControlsA boolean to denote whether the group controls display within or outside the group.
focusRingEither an object to style the focus ring or false, which hides the focus ring entirely. For styles, offset (in pixels) controls the distance from the ring to the edge of the group; borderRadius(in pixels) controls the rounding edge of the focus ring.
childrenAny child elements.


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

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