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.

Emoji autocomplete is enabled by default. Typing a colon followed by one or more characters, such as :smi, brings up a list of matching emojis, the same way it works on GitHub, Slack and other apps. Use the arrow keys to move through the list, the Enter or Tab key to insert the selected emoji, and the Escape key to dismiss the list. This can be turned off with the use_emoji_autocomplete option.

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.

use_emoji_autocomplete

• Type: boolean
• Default: true

Whether to enable emoji autocomplete in the text area. When set to true, typing a colon followed by one or more characters, such as :smi, brings up a list of matching emojis that can be inserted into the field. The colon must be at the beginning of a line or preceded by a space or an opening bracket, so a colon in the middle of a word, as in 12:34, does not trigger the suggestions.

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"
}

JavaScript

{
  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
}

JavaScript

{
  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."
}