Textarea Field - Payload

The Textarea Field is nearly identical to the Text Field but it features a slightly larger input that is better suited to edit longer text.

To add a Textarea Field, set the type to textarea in your Field Config:

import type { Field } from 'payload'

export const MyTextareaField: Field = {
  // ...
  type: 'textarea', // highlight-line
}

Config Options

Option	Description
`name` *	To be used as the property name when stored and retrieved from the database. More details.
`label`	Text used as a field label in the Admin Panel or an object with keys for each language.
`unique`	Enforce that each entry in the Collection has a unique value for this field. This creates a database-level unique index on the field's path. More details.
`minLength`	Used by the default validation function to ensure values are of a minimum character length.
`maxLength`	Used by the default validation function to ensure values are of a maximum character length.
`validate`	Provide a custom validation function that will be executed on both the Admin Panel and the backend. More details.
`index`	Build an index for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often.
`saveToJWT`	If this field is top-level and nested in a config supporting Authentication, include its data in the user JWT.
`hooks`	Provide Field Hooks to control logic for this field. More details.
`access`	Provide Field Access Control to denote what users can see and do with this field's data. More details.
`hidden`	Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin Panel.
`defaultValue`	Provide data to be used for this field's default value. More details.
`localized`	Enable localization for this field. Requires localization to be enabled in the Base config.
`required`	Require this field to have a value.
`admin`	Admin-specific configuration. More details.
`custom`	Extension point for adding custom data (e.g. for plugins)
`typescriptSchema`	Override field type generation with providing a JSON schema
`virtual`	Provide `true` to disable field in the database, or provide a string path to link the field with a relationship. See Virtual Fields

* An asterisk denotes that a property is required.

Admin Options

To customize the appearance and behavior of the Textarea Field in the Admin Panel, you can use the admin option:

import type { Field } from 'payload'

export const MyTextareaField: Field = {
  // ...
  admin: {
    // highlight-line
    // ...
  },
}

The Textarea Field inherits all of the default admin options from the base Field Admin Config, plus the following additional options:

Option	Description
`placeholder`	Set this property to define a placeholder string in the textarea.
`autoComplete`	Set this property to a string that will be used for browser autocomplete.
`rows`	Set the number of visible text rows in the textarea. Defaults to `2` if not specified.
`rtl`	Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction.

Example

import type { CollectionConfig } from 'payload'

export const ExampleCollection: CollectionConfig = {
  slug: 'example-collection',
  fields: [
    {
      name: 'metaDescription', // required
      type: 'textarea', // required
      required: true,
    },
  ],
}

Custom Components

Field

Server Component

tsx

import type React from 'react'
import { TextareaField } from '@payloadcms/ui'
import type { TextareaFieldServerComponent } from 'payload'

export const CustomTextareaFieldServer: TextareaFieldServerComponent = ({
  clientField,
  path,
  schemaPath,
  permissions,
}) => {
  return (
    <TextareaField
      field={clientField}
      path={path}
      schemaPath={schemaPath}
      permissions={permissions}
    />
  )
}

Client Component

tsx

'use client'
import React from 'react'
import { TextareaField } from '@payloadcms/ui'
import type { TextareaFieldClientComponent } from 'payload'

export const CustomTextareaFieldClient: TextareaFieldClientComponent = (
  props,
) => {
  return <TextareaField {...props} />
}

Label

Server Component

tsx

import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextareaFieldLabelServerComponent } from 'payload'

export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent =
  ({ clientField, path }) => {
    return (
      <FieldLabel
        label={clientField?.label || clientField?.name}
        path={path}
        required={clientField?.required}
      />
    )
  }

Client Component

tsx

'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextareaFieldLabelClientComponent } from 'payload'

export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent =
  ({ field, path }) => {
    return (
      <FieldLabel
        label={field?.label || field?.name}
        path={path}
        required={field?.required}
      />
    )
  }