Inline Text Field


The InlineTextField 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 InlineTextField may be used in an Inline Form.

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

// Example 'Page' Component
export function Page(props) {
  const [, form] = useForm(props.data)
  
  usePlugin(form)
  
  return (
    <InlineForm form={form}>
      <h1>
        <InlineTextField 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.

Interface

export interface InlineTextFieldProps {
  name: string
}