---
url: /en/docs/fields/string.md
description: Enter and manage short text values in Sveltia CMS for content entries.
---

# String Field

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

::: tip Alternative for longer or multiple strings

If you need to handle longer text content, consider using the [Text](/en/docs/fields/text) or [RichText](/en/docs/fields/richtext) field type instead.

If you need to manage multiple strings, consider using the simple [List](/en/docs/fields/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. The counter only counts what the user types: the `prefix` and `suffix` are not included.

Emoji autocomplete is enabled by default, unless the `type` option is `url` or `email`. 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 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.

::: tip CSP

You may need to update your Content Security Policy (CSP) to allow embedding YouTube videos. See the [CSP documentation](/en/docs/security#setting-up-content-security-policy) 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. The length doesn’t include the `prefix` and `suffix`, or leading and trailing whitespace, and an emoji counts as a single character.
* If the `type` option is `url` or `email`, the string must be a valid URL or email address, checked without the `prefix` and `suffix`. An email address must also have a dot in its domain name.
* If the `pattern` option is provided, the string must match the specified regular expression pattern.

## Options

In addition to the [common field options](/en/docs/fields#common-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 shows the matching keyboard on mobile devices, 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, not counting the `prefix` and `suffix`. This enables character counter in the UI and validation.

#### `maxlength`

* **Type**: `integer`
* **Default**: `Infinity`

Maximum length of the string, not counting the `prefix` and `suffix`. 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.

#### `use_emoji_autocomplete`

* **Type**: `boolean`
* **Default**: `true`, unless the `type` option is `url` or `email`

Whether to enable emoji autocomplete in the text input. 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 the input 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 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.

::: code-group

```yaml [YAML]
- name: title
  label: Title
```

```toml [TOML]
[[fields]]
name = "title"
label = "Title"
```

```json [JSON]
{
  "name": "title",
  "label": "Title"
}
```

```js [JavaScript]
{
  name: "title",
  label: "Title",
}
```

:::

Output example:

::: code-group

```yaml [YAML]
title: My First Post
```

```toml [TOML]
title = "My First Post"
```

```json [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.

::: code-group

```yaml [YAML]
- name: title
  label: Title
  widget: string
  default: 'Enter your title here.'
  minlength: 5
  maxlength: 100
```

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

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

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

:::

Output example:

::: code-group

```yaml [YAML]
title: My Second Post
```

```toml [TOML]
title = "My Second Post"
```

```json [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.

::: code-group

```yaml [YAML]
- name: website
  label: Website
  widget: string
  type: url
```

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

```json [JSON]
{
  "name": "website",
  "label": "Website",
  "widget": "string",
  "type": "url"
}
```

```js [JavaScript]
{
  name: "website",
  label: "Website",
  widget: "string",
  type: "url",
}
```

:::

Output example:

::: code-group

```yaml [YAML]
website: https://example.com
```

```toml [TOML]
website = "https://example.com"
```

```json [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.

::: code-group

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

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

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

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

:::

Output example:

::: code-group

```yaml [YAML]
contact_email_link: mailto:contact@example.com?subject=Inquiry
```

```toml [TOML]
contact_email_link = "mailto:contact@example.com?subject=Inquiry"
```

```json [JSON]
{
  "contact_email_link": "mailto:contact@example.com?subject=Inquiry"
}
```

```js [JavaScript]
{
  contact_email_link: 'mailto:contact@example.com?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](/en/docs/fields/compute#email-link).

### 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.

::: code-group

```yaml [YAML]
- name: hashtag
  label: Hashtag
  widget: string
  before_input: '#'
  hint: 'Enter a hashtag without the # symbol.'
```

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

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

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

:::

Output example:

::: code-group

```yaml [YAML]
hashtag: travel
```

```toml [TOML]
hashtag = "travel"
```

```json [JSON]
{
  "hashtag": "travel"
}
```

:::