Skip to content

Text Field

The Text field type provides a multi-line text area for users to input longer strings of text within the CMS.

Alternative for shorter or rich text

If you need to handle shorter text content, consider using the String field type instead.

If you need rich text formatting, consider using the RichText field type instead.

User Interface

Editor

Multi-line text area for entering longer strings of text. It supports standard text input features like copy-paste, undo-redo, and basic keyboard shortcuts.

A character counter can be displayed if minlength or maxlength option is set, and a user-friendly validation message will appear if the input does not meet the specified length requirements.

Preview

A read-only view of the entered text.

Data Type

A string with possible line breaks (\n characters) representing the entered text. If the required option is set to false and the field is left empty, the value will be an empty string.

Data Validation

  • If the required option is set to true, the text must not be empty.
  • If minlength and/or maxlength options are specified, the text length must be within the defined limits.
  • If the pattern option is provided, the text must match the specified regular expression pattern.

Options

In addition to the common field options, the Text field supports the following options:

Required Options

widget

  • Type: string
  • Default: string

Must be set to text.

Optional Options

default

  • Type: string
  • Default: ""

The default value for the field when creating a new entry.

minlength

  • Type: integer
  • Default: 0

Minimum length of the string. This enables character counter in the UI and validation.

maxlength

  • Type: integer
  • Default: Infinity

Maximum length of the string. This enables character counter in the UI and validation.

Examples

Basic Text Field

This example shows a simple Text field without any additional options.

yaml
- name: description
  label: Description
  widget: text
toml
[[fields]]
name = "description"
label = "Description"
widget = "text"
json
{
  "name": "description",
  "label": "Description",
  "widget": "text"
}
js
{
  name: "description",
  label: "Description",
  widget: "text",
}

Output example:

yaml
description: "This is a sample description.\nIt can span multiple lines."
toml
description = """This is a sample description.
It can span multiple lines."""
json
{
  "description": "This is a sample description.\nIt can span multiple lines."
}

Default Text Field with Length Restrictions

This example shows a Text field with a default value and length restrictions. The field requires a minimum of 10 characters and allows a maximum of 500 characters.

yaml
- name: description
  label: Description
  widget: text
  default: 'Enter your description here.'
  minlength: 10
  maxlength: 500
toml
[[fields]]
name = "description"
label = "Description"
widget = "text"
default = "Enter your description here."
minlength = 10
maxlength = 500
json
{
  "name": "description",
  "label": "Description",
  "widget": "text",
  "default": "Enter your description here.",
  "minlength": 10,
  "maxlength": 500
}
js
{
  name: "description",
  label: "Description",
  widget: "text",
  default: "Enter your description here.",
  minlength: 10,
  maxlength: 500,
}

Output example:

yaml
description: 'Enter your description here.'
toml
description = "Enter your description here."
json
{
  "description": "Enter your description here."
}

Released under the MIT License.