String Field

The String field type allows users to input and manage short to medium-length text strings within the CMS entry form.

Alternative for longer or multiple strings

If you need to handle longer text content, consider using the Text or RichText field type instead.

If you need to manage multiple strings, consider using the simple List field type instead.

User Interface

Editor

Single-line text input field for entering short to medium-length strings. It supports standard text input features like copy-paste, undo-redo, and basic keyboard shortcuts.

Additional text can be displayed before or after the input field using the before_input and after_input options.

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 string. If the prefix or suffix options are set, they will be displayed along with the string in the preview.

If the string is a YouTube video URL, it will be automatically embedded in the preview for better visualization.

If the string is a regular URL, it will be displayed as a clickable link that opens in a new browser tab.

CSP Settings

You may need to update your Content Security Policy (CSP) to allow embedding YouTube videos. See the CSP documentation for more details.

Data Type

A string. 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 string must not be empty.
• If minlength and/or maxlength options are specified, the string length must be within the defined limits.
• If the pattern option is provided, the string must match the specified regular expression pattern.

Options

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

Optional Options

widget

• Type: string
• Default: string

Must be set to string, but is optional since it is the default field type.

default

• Type: string
• Default: ""

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

type

• Type: string
• Default: ""

The value type, either url or email. This option changes the input type attribute accordingly for better mobile keyboard support, and also enables basic validation for URL or email format.

prefix

• Type: string
• Default: ""

Strings to be prepended to the value when saving or displaying it. If the value is empty, the prefix will not be added.

suffix

• Type: string
• Default: ""

Strings to be appended to the value when saving or displaying it. If the value is empty, the suffix will not be added.

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.

before_input

• Type: string
• Default: ""

Text to display before the input field.

after_input

• Type: string
• Default: ""

Text to display after the input field.

Examples

Basic String Field

The following example demonstrates a basic String field for entering a title. Note that the widget option is optional since string is the default field type.

YAML

- name: title
  label: Title

TOML

[[fields]]
name = "title"
label = "Title"

JSON

{
  "name": "title",
  "label": "Title"
}

JavaScript

{
  name: "title",
  label: "Title",
}

Output example:

YAML

title: My First Post

TOML

title = "My First Post"

JSON

{
  "title": "My First Post"
}

Minimum and Maximum Length

The following example demonstrates a String field with minlength and maxlength options set to enforce input length constraints. It also includes a default value.

YAML

- name: title
  label: Title
  widget: string
  default: 'Enter your title here.'
  minlength: 5
  maxlength: 100

TOML

[[fields]]
name = "title"
label = "Title"
widget = "string"
default = "Enter your title here."
minlength = 5
maxlength = 100

JSON

{
  "name": "title",
  "label": "Title",
  "widget": "string",
  "default": "Enter your title here.",
  "minlength": 5,
  "maxlength": 100
}

JavaScript

{
  name: "title",
  label: "Title",
  widget: "string",
  default: "Enter your title here.",
  minlength: 5,
  maxlength: 100,
}

Output example:

YAML

title: My Second Post

TOML

title = "My Second Post"

JSON

{
  "title": "My Second Post"
}

URL Field

The following example demonstrates a String field configured for URL input. Validation will ensure that the entered value is a properly formatted URL.

YAML

- name: website
  label: Website
  widget: string
  type: url

TOML

[[fields]]
name = "website"
label = "Website"
widget = "string"
type = "url"

JSON

{
  "name": "website",
  "label": "Website",
  "widget": "string",
  "type": "url"
}

JavaScript

{
  name: "website",
  label: "Website",
  widget: "string",
  type: "url",
}

Output example:

YAML

website: https://example.com

TOML

website = "https://example.com"

JSON

{
  "website": "https://example.com"
}

Email Field with Prefix and Suffix

Some use cases may require adding specific text before or after the input value, such as mailto: for email links or query parameters. The following example demonstrates a String field configured for email input with prefix and suffix options.

YAML

- name: contact_email_link
  label: Contact Email Link
  widget: string
  type: email
  prefix: 'mailto:'
  suffix: '?subject=Inquiry'

TOML

[[fields]]
name = "contact_email_link"
label = "Contact Email Link"
widget = "string"
type = "email"
prefix = "mailto:"
suffix = "?subject=Inquiry"

JSON

{
  "name": "contact_email_link",
  "label": "Contact Email Link",
  "widget": "string",
  "type": "email",
  "prefix": "mailto:",
  "suffix": "?subject=Inquiry"
}

JavaScript

{
  name: "contact_email_link",
  label: "Contact Email Link",
  widget: "string",
  type: "email",
  prefix: "mailto:",
  suffix: "?subject=Inquiry",
}

Output example:

YAML

contact_email_link: mailto:[email protected]?subject=Inquiry

TOML

contact_email_link = "mailto:[email protected]?subject=Inquiry"

JSON

{
  "contact_email_link": "mailto:[email protected]?subject=Inquiry"
}

JavaScript

{
  contact_email_link: 'mailto:[email protected]?subject=Inquiry';
}

Alternatively, you can use a Compute field to generate the full email link based on a separate email String field, as shown in the Compute field documentation.

Hashtag Field

The following example demonstrates a String field configured for entering hashtags, with a # symbol displayed before the input field and a hint to guide users. Unlike the prefix option, which adds text to the saved value, the before_input option only affects the UI display, not the stored data.

YAML

- name: hashtag
  label: Hashtag
  widget: string
  before_input: '#'
  hint: 'Enter a hashtag without the # symbol.'

TOML

[[fields]]
name = "hashtag"
label = "Hashtag"
widget = "string"
before_input = "#"
hint = "Enter a hashtag without the # symbol."

JSON

{
  "name": "hashtag",
  "label": "Hashtag",
  "widget": "string",
  "before_input": "#",
  "hint": "Enter a hashtag without the # symbol."
}

JavaScript

{
  name: "hashtag",
  label: "Hashtag",
  widget: "string",
  before_input: "#",
  hint: "Enter a hashtag without the # symbol.",
}

Output example:

YAML

hashtag: travel

TOML

hashtag = "travel"

JSON

{
  "hashtag": "travel"
}