文本字段

文本字段(Text Field)是最常用的字段类型之一。它将字符串保存到数据库，并为管理面板提供一个简单的文本输入框。

展示Payload管理面板中的文本字段和只读文本字段
管理面板中文本字段和只读文本字段的截图

要添加文本字段，只需在字段配置中将type设置为text：

import type { Field } from 'payload'

export const MyTextField: Field = {
  // ...
  type: 'text', // highlight-line
}

配置选项

选项描述
name *作为属性名用于数据库存储和检索。了解更多
label在 Admin Panel 中用作字段标签的文本，或为每种语言提供键值对的对象。
unique强制要求集合中每个条目该字段的值必须唯一。
minLength用于默认验证函数，确保值的最小字符长度。
maxLength用于默认验证函数，确保值的最大字符长度。
validate提供自定义验证函数，将在 Admin Panel 和后台执行。了解更多
index为该字段构建索引以加快查询速度。如果用户会频繁查询该字段数据，请将此字段设为 true。
saveToJWT如果该字段是顶级字段且嵌套在支持身份验证的配置中，则将其数据包含在用户 JWT 中。
hooks提供字段钩子来控制该字段的逻辑。更多详情。
access提供字段访问控制，指定用户可以查看和操作该字段数据的权限。更多详情。
hidden完全限制该字段在所有 API 中的可见性。仍会保存到数据库，但不会出现在任何 API 或 Admin Panel 中。
defaultValue提供用于该字段默认值的数据。了解更多
localized启用该字段的本地化功能。需要在基础配置中启用本地化。
required要求该字段必须有值。
admin管理员特定配置。更多详情。
custom用于添加自定义数据（例如插件）的扩展点。
hasMany使该字段成为有序的文本数组，而不仅仅是单个文本。
minRows如果 hasMany 设为 true，则指定数组中文本的最小数量。
maxRows如果 hasMany 设为 true，则指定数组中文本的最大数量。
typescriptSchema通过提供 JSON schema 来覆盖字段类型生成。
virtual设为 true 可禁用数据库中的字段，或提供字符串路径来将字段与关系关联。参见虚拟字段

* 星号表示该属性为必填项。

管理选项

要自定义文本字段在管理面板中的外观和行为，可以使用 admin 选项：

import type { Field } from 'payload'

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

文本字段继承了基础字段管理配置中的所有默认管理选项，并额外支持以下选项：

选项描述
placeholder设置此属性以定义文本输入框中的占位符字符串。
autoComplete设置此属性为将用于浏览器自动完成的字符串。
rtl覆盖此字段在管理面板中的默认文本方向。设置为 true 可强制使用从右到左的文本方向。

示例

collections/ExampleCollection.ts

import type { CollectionConfig } from 'payload'

export const ExampleCollection: CollectionConfig = {
  slug: 'example-collection',
  fields: [
    {
      name: 'pageTitle', // 必填
      type: 'text', // 必填
      required: true,
    },
  ],
}

自定义组件

字段

服务端组件

import type React from 'react'
import { TextField } from '@payloadcms/ui'
import type { TextFieldServerComponent } from 'payload'

export const CustomTextFieldServer: TextFieldServerComponent = ({
  clientField,
  path,
  schemaPath,
  permissions,
}) => {
  return (
    <TextField
      field={clientField}
      path={path}
      schemaPath={schemaPath}
      permissions={permissions}
    />
  )
}

客户端组件

'use client'
import React from 'react'
import { TextField } from '@payloadcms/ui'
import type { TextFieldClientComponent } from 'payload'

export const CustomTextFieldClient: TextFieldClientComponent = (props) => {
  return <TextField {...props} />
}

标签

服务端组件

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

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

客户端组件

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

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