The InlineTextarea component represents a multi-line text input. It should be used for content values that are long strings: for example, a page description.
Below is an example of how InlineTextarea may be used in an Inline Form.
import { useForm, usePlugin } from 'tinacms'
import { InlineForm, InlineTextarea } from 'react-tinacms-inline'
// Example 'Page' Component
export function Page(props) {
const [, form] = useForm(props.data)
usePlugin(form)
return (
<InlineForm form={form}>
<h3>
<InlineTextarea name="title" />
</h3>
</InlineForm>
)
}Note: Some Inline Field styles can be extended or overridden via Styled Components.
| Key | Description |
|---|---|
name | The path to some value in the data being edited. |
className | To set styles directly on the input or extend via styled components. |
focusRing | Either 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. |
interface InlineTextareaProps {
name: string
className?: string
focusRing?: boolean | FocusRingProps
}
interface FocusRingProps {
offset?: number | { x: number; y: number }
borderRadius?: number
}