---
url: /en/docs/fields/compute.md
description: Compute read-only values in Sveltia CMS based on other fields.
---

# Compute Field

The Compute field type stores read-only values computed from other fields in the entry. It automatically updates the value when the dependent fields change.

## User Interface

### Editor

The field isn’t shown in the editor; its value is computed from other fields and updated automatically when they change. It can’t be edited, regardless of the [`readonly`](/en/docs/fields#readonly) option.

### Preview

A read-only display of the computed value.

## Data Type

A string representing the computed value.

If the template consists of the `{{index}}` variable alone, the value will be a number representing the current index of the item in the list. Combined with other text or variables, it’s part of a string.

If the template contains a UUID variable, the generated UUID is preserved in the saved value across edits.

## Data Validation

No specific data validation is applied to the Compute field, as its value is derived from other fields.

## Options

In addition to the [common field options](/en/docs/fields#common-options), the Compute field supports the following options:

### Required Options

#### `widget`

* **Type**: `string`
* **Default**: `string`

Must be set to `compute`.

#### `value`

* **Type**: `string`

The value can be computed using a template string that references other fields. It supports:

* A value template that defines how to compute the field’s value. It can include references to other fields using the syntax `{{fields.name}}`, where `name` is the name of the field to reference. [String transformations](/en/docs/string-transformations) can be applied.
* The special variable `{{index}}` to reference the current index when used within a list. It only works inside a [List field](/en/docs/fields/list).
* The special variables `{{uuid}}`, `{{uuid_short}}` and `{{uuid_shorter}}` to generate a random UUID or its shorter version, just like the [slug template tags](/en/docs/collections/entries/slugs#slug-template-tags). The UUID is generated once when the entry is created and kept afterwards, even as the other parts of the value change, so it can serve as a stable identifier. A duplicated entry gets a new UUID. See the [example below](#generating-a-unique-identifier).

::: warning

To be kept, a UUID variable has to be at either end of the template, or only be separated from the ends by literal text and other UUID variables, like `{{fields.slug}}-{{uuid_short}}`. A UUID variable sitting between two field references, such as `{{fields.a}}{{uuid}}{{fields.b}}`, can’t be told apart from the values around it once saved, so a new UUID is generated whenever the entry is opened. The same applies when a string transformation changes the shape of the UUID, e.g. `truncate`; `upper` and `lower` are fine.

:::

## Examples

### Basic Example

This example demonstrates a Compute field that concatenates the values of two string fields, `first_name` and `last_name`, to create a `full_name` field.

::: code-group

```yaml [YAML]
fields:
  - name: first_name
    label: First Name
    widget: string
  - name: last_name
    label: Last Name
    widget: string
  - name: full_name
    label: Full Name
    widget: compute
    value: '{{fields.first_name}} {{fields.last_name}}'
```

```toml [TOML]
[[fields]]
name = "first_name"
label = "First Name"
widget = "string"
[[fields]]
name = "last_name"
label = "Last Name"
widget = "string"
[[fields]]
name = "full_name"
label = "Full Name"
widget = "compute"
value = "{{fields.first_name}} {{fields.last_name}}"
```

```json [JSON]
{
  "fields": [
    {
      "name": "first_name",
      "label": "First Name",
      "widget": "string"
    },
    {
      "name": "last_name",
      "label": "Last Name",
      "widget": "string"
    },
    {
      "name": "full_name",
      "label": "Full Name",
      "widget": "compute",
      "value": "{{fields.first_name}} {{fields.last_name}}"
    }
  ]
}
```

```js [JavaScript]
{
  fields: [
    {
      name: 'first_name',
      label: 'First Name',
      widget: 'string',
    },
    {
      name: 'last_name',
      label: 'Last Name',
      widget: 'string',
    },
    {
      name: 'full_name',
      label: 'Full Name',
      widget: 'compute',
      value: '{{fields.first_name}} {{fields.last_name}}',
    },
  ],
}
```

:::

Output example when `first_name` is “John” and `last_name` is “Doe“:

::: code-group

```yaml [YAML]
first_name: John
last_name: Doe
full_name: John Doe
```

```toml [TOML]
first_name = "John"
last_name = "Doe"
full_name = "John Doe"
```

```json [JSON]
{
  "first_name": "John",
  "last_name": "Doe",
  "full_name": "John Doe"
}
```

```js [JavaScript]
{
  first_name: 'John',
  last_name: 'Doe',
  full_name: 'John Doe',
}
```

:::

### Email Link

This example demonstrates a Compute field that generates a mailto link using an email address from another String field.

::: code-group

```yaml [YAML]
fields:
  - name: contact_email
    label: Contact Email
    widget: string
    type: email
  - name: contact_email_link
    label: Contact Email Link
    widget: compute
    value: 'mailto:{{fields.contact_email}}?subject=Inquiry'
```

```toml [TOML]
[[fields]]
name = "contact_email"
label = "Contact Email"
widget = "string"
type = "email"
[[fields]]
name = "contact_email_link"
label = "Contact Email Link"
widget = "compute"
value = "mailto:{{fields.contact_email}}?subject=Inquiry"
```

```json [JSON]
{
  "fields": [
    {
      "name": "contact_email",
      "label": "Contact Email",
      "widget": "string",
      "type": "email"
    },
    {
      "name": "contact_email_link",
      "label": "Contact Email Link",
      "widget": "compute",
      "value": "mailto:{{fields.contact_email}}?subject=Inquiry"
    }
  ]
}
```

```js [JavaScript]
{
  fields: [
    {
      name: 'contact_email',
      label: 'Contact Email',
      widget: 'string',
      type: 'email',
    },
    {
      name: 'contact_email_link',
      label: 'Contact Email Link',
      widget: 'compute',
      value: 'mailto:{{fields.contact_email}}?subject=Inquiry',
    },
  ],
}
```

:::

Output example when `contact_email` is “contact@example.com“:

::: code-group

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

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

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

```js [JavaScript]
{
  contact_email: 'contact@example.com',
  contact_email_link: 'mailto:contact@example.com?subject=Inquiry';
}
```

:::

### Using `index` in a List

The `{{index}}` variable can be used within a list to reference the current item’s index. In this example, we create a list of items where each item has a computed `index` based on its index in the list.

::: code-group

```yaml [YAML]
fields:
  - name: items
    label: Items
    widget: list
    fields:
      - name: name
        label: Name
        widget: string
      - name: index
        label: Item Index
        widget: compute
        value: '{{index}}'
```

```toml [TOML]
[[fields]]
name = "items"
label = "Items"
widget = "list"

[[fields.fields]]
name = "name"
label = "Name"
widget = "string"

[[fields.fields]]
name = "index"
label = "Item Index"
widget = "compute"
value = "{{index}}"
```

```json [JSON]
{
  "fields": [
    {
      "name": "items",
      "label": "Items",
      "widget": "list",
      "fields": [
        {
          "name": "name",
          "label": "Name",
          "widget": "string"
        },
        {
          "name": "index",
          "label": "Item Index",
          "widget": "compute",
          "value": "{{index}}"
        }
      ]
    }
  ]
}
```

```js [JavaScript]
{
  fields: [
    {
      name: 'items',
      label: 'Items',
      widget: 'list',
      fields: [
        {
          name: 'name',
          label: 'Name',
          widget: 'string',
        },
        {
          name: 'index',
          label: 'Item Index',
          widget: 'compute',
          value: '{{index}}',
        },
      ],
    },
  ],
}
```

:::

Output example when three items are added with names “Apple“, “Banana“, and “Cherry“:

::: code-group

```yaml [YAML]
items:
  - name: Apple
    index: 0
  - name: Banana
    index: 1
  - name: Cherry
    index: 2
```

```toml [TOML]
[[items]]
name = "Apple"
index = 0
[[items]]
name = "Banana"
index = 1
[[items]]
name = "Cherry"
index = 2
```

```json [JSON]
{
  "items": [
    {
      "name": "Apple",
      "index": 0
    },
    {
      "name": "Banana",
      "index": 1
    },
    {
      "name": "Cherry",
      "index": 2
    }
  ]
}
```

:::

### Generating a Unique Identifier

The `{{uuid}}`, `{{uuid_short}}` and `{{uuid_shorter}}` variables can be combined with other fields to build a readable identifier that stays unique. In this example, the `id` field combines the slugified title with a short random string. Once the entry has been saved, the random part is kept even if the title is edited later.

::: code-group

```yaml [YAML]
fields:
  - name: title
    label: Title
    widget: string
  - name: id
    label: ID
    widget: compute
    value: '{{fields.title | slugify}}-{{uuid_shorter}}'
```

```toml [TOML]
[[fields]]
name = "title"
label = "Title"
widget = "string"
[[fields]]
name = "id"
label = "ID"
widget = "compute"
value = "{{fields.title | slugify}}-{{uuid_shorter}}"
```

```json [JSON]
{
  "fields": [
    {
      "name": "title",
      "label": "Title",
      "widget": "string"
    },
    {
      "name": "id",
      "label": "ID",
      "widget": "compute",
      "value": "{{fields.title | slugify}}-{{uuid_shorter}}"
    }
  ]
}
```

```js [JavaScript]
{
  fields: [
    {
      name: 'title',
      label: 'Title',
      widget: 'string',
    },
    {
      name: 'id',
      label: 'ID',
      widget: 'compute',
      value: '{{fields.title | slugify}}-{{uuid_shorter}}',
    },
  ],
}
```

:::

Output example when `title` is “Hello World“:

::: code-group

```yaml [YAML]
title: Hello World
id: hello-world-e7bc7d91
```

```toml [TOML]
title = "Hello World"
id = "hello-world-e7bc7d91"
```

```json [JSON]
{
  "title": "Hello World",
  "id": "hello-world-e7bc7d91"
}
```

```js [JavaScript]
{
  title: 'Hello World',
  id: 'hello-world-e7bc7d91',
}
```

:::