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.

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

KeyDescription
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 a boolean to show/hide the focus ring. Defaults to true which displays the focus ring with default styles. For style options, offset (in pixels) sets the distance from the ring to the edge of the component, and borderRadius (in pixels) controls the rounded corners of the focus ring.
childrenAny child elements.

Interface

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

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

Last Edited: January 2, 2021