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

Interface

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