Text Inputs

TextInput and TextareaInput combine native text controls with Payload's label, description, validation, and read-only field presentation. Use them when building a Custom Field that manages its own value.

Import

1import { TextareaInput, TextInput } from '@payloadcms/ui'

TextInput

Title*

Displayed as the document title.

Loading component example…

TextInput is controlled. Pass the current string through value and update it from the native change event.

Set hasMany to render Payload's sortable multi-value text control instead of a native input.

TextareaInput

Summary

Keep the summary brief and useful.

Loading component example…

Use rows to establish the initial height. The value remains controlled by the surrounding Custom Field.

Common props

These props are shared by both inputs unless noted otherwise.

Prop	Type	Default	Description
`path` *	`string`	—	Identifies the field and connects its UI.
`value`	`string`	`''`	Supplies the controlled value.
`onChange`	`ChangeEventHandler`	—	Receives native input changes.
`label`	`StaticLabel`	—	Displays Payload's field label.
`description`	`StaticDescription`	—	Displays helper text beneath the input.
`placeholder`	`string \| LabelFunction`	—	Displays translated placeholder text.
`required`	`boolean`	`false`	Displays the required marker.
`readOnly`	`boolean`	`false`	Disables editing and applies read-only styles.
`showError`	`boolean`	Form	Displays the current validation error.
`BeforeInput`	`ReactNode`	—	Inserts content before the native control.
`AfterInput`	`ReactNode`	—	Inserts content after the native control.
`rows`	`number`	—	Sets the TextareaInput row count.
`hasMany`	`boolean`	`false`	Enables TextInput's multi-value mode.

* An asterisk denotes that a prop is required.

Custom field usage

Inside a Custom Field, connect the input to Payload's form state with useField:

1'use client'
2
3import { TextInput, useField } from '@payloadcms/ui'
4
5export function CustomTextField({ field, path }) {
6  const { setValue, showError, value } = useField<string>({ path })
7
8  return (
9    <TextInput
10      label={field.label}
11      onChange={(event) => setValue(event.target.value)}
12      path={path}
13      required={field.required}
14      showError={showError}
15      value={value}
16    />
17  )
18}

Provider requirements

The Admin Panel supplies the translation and form contexts used by the built-in label, description, and validation components. Use these inputs inside a Payload Custom Field, or provide equivalent contexts when rendering them elsewhere.

Was this page helpful?

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.