Sveltia CMS

Appearance

Compute Field ​

The Compute field type displays read-only computed values based on other fields in the entry. It automatically updates the displayed value when the dependent fields change.

User Interface ​

Editor ​

Read-only display of computed values based on other fields in the entry. The value is automatically updated when the dependent fields change.

Preview ​

A read-only display of the computed value.

Data Type ​

A string representing the computed value.

If the {{index}} variable is used within a list, the value will be a number representing the current index of the item in the list.

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, 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.
  • The special variable {{index}} to reference the current index when used within a list. It only works inside a List field.

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.

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
[[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
{
  "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
{
  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“:

yaml
first_name: John
last_name: Doe
full_name: John Doe
toml
first_name = "John"
last_name = "Doe"
full_name = "John Doe"
json
{
  "first_name": "John",
  "last_name": "Doe",
  "full_name": "John Doe"
}
js
{
  first_name: 'John',
  last_name: 'Doe',
  full_name: 'John Doe',
}

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

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
[[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
{
  "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
{
  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 “[email protected]“:

yaml
contact_email: [email protected]
contact_email_link: mailto:[email protected]?subject=Inquiry
toml
contact_email = "[email protected]"
contact_email_link = "mailto:[email protected]?subject=Inquiry"
json
{
  "contact_email": "[email protected]",
  "contact_email_link": "mailto:[email protected]?subject=Inquiry"
}
js
{
  contact_email: '[email protected]',
  contact_email_link: 'mailto:[email protected]?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.

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
[[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
{
  "fields": [
    {
      "name": "items",
      "label": "Items",
      "widget": "list",
      "fields": [
        {
          "name": "name",
          "label": "Name",
          "widget": "string"
        },
        {
          "name": "index",
          "label": "Item Index",
          "widget": "compute",
          "value": "{{index}}"
        }
      ]
    }
  ]
}
js
{
  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“:

yaml
items:
  - name: Apple
    index: 0
  - name: Banana
    index: 1
  - name: Cherry
    index: 2
toml
[[items]]
name = "Apple"
index = 0
[[items]]
name = "Banana"
index = 1
[[items]]
name = "Cherry"
index = 2
json
{
  "items": [
    {
      "name": "Apple",
      "index": 0
    },
    {
      "name": "Banana",
      "index": 1
    },
    {
      "name": "Cherry",
      "index": 2
    }
  ]
}

Released under the MIT License.

Copyright © 2026 Kohei Yoshino