Inline Text


The InlineText component represents a single line text input. It should be used for content values that are short strings, for example, a page title.

Definition

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

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

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

  usePlugin(form)

  return (
    <InlineForm form={form}>
      <h1>
        <InlineText name="title" />
      </h1>
    </InlineForm>
  )
}

Note: Some Inline Field styles can be extended or overridden via Styled Components.

Options

KeyDescription
nameThe path to some value in the data being edited.
classNameTo set styles directly on the input or extend via styled components.
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.
placeholderText that is used when the field has no value set. This value will be displayed whether or not the CMS is enabled.

Interface

interface InlineTextProps {
  name: string
  className?: string
  focusRing?: boolean | FocusRingProps
}

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