# configurator-field

> Groups configurator fields; has no effect of its own. Every configurator field counts the value it already has when it mounts (typed before the configurator loaded, restored by the browser on Back, a default value / checked / selected), as the add to cart sends it.

Status: Ready (Smootify 2.0)  
Plan: Server plan  
Add-on: Product configurator  
URL: https://www.smootify.io/docs/reference/elements/configurator-field  
Updated: 2026-10-13

## At a glance

| Element | Put inside | On while | Formula |
|---|---|---|---|
| [`configurator-input`](https://www.smootify.io/docs/reference/elements/configurator-input) | a Text field or a Text area | it holds a valid value | `data-formula`, which can use `length` |
| [`configurator-checkbox`](https://www.smootify.io/docs/reference/elements/configurator-checkbox) | a Checkbox | it is checked | `data-formula` |
| [`configurator-radio`](https://www.smootify.io/docs/reference/elements/configurator-radio) | Radio buttons | a radio is chosen (clicking it again unchecks it) | in each radio's Choice value, after a `\|` |
| [`configurator-select`](https://www.smootify.io/docs/reference/elements/configurator-select) | a Select field | a choice with a value is chosen | in each option's value, after a `\|` |
| [`configurator-dropdown`](https://www.smootify.io/docs/reference/elements/configurator-dropdown) | a Webflow Dropdown and a Select field | a choice is made | in the options of the Select field, after a `\|` |
| [`configurator-popover`](https://www.smootify.io/docs/reference/elements/configurator-popover) | a popover and a Select field | a choice is made | in the options of the Select field, after a `\|` |
| [`configurator-dimension`](https://www.smootify.io/docs/reference/elements/configurator-dimension) | Text fields with the Type Number | every one holds a valid number | `data-formula`, which can use each field's Name |
| [`configurator-file-input`](https://www.smootify.io/docs/reference/elements/configurator-file-input) | an upload area | at least one file is uploaded | `data-formula`, which can use `file` |
| [`configurator-field`](https://www.smootify.io/docs/reference/elements/configurator-field) | configurator fields, to group them | never: it only groups | a `data-formula` on it does nothing |

_The formula builder of this page writes a formula from a field and a rule, and tests it with a price: open the page in a browser to use it. The rules it writes:_

| Rule | Formula |
|---|---|
| add an amount, such as 5 | `price + 5` |
| an amount per character of a `configurator-input` | `price + 0.3 * length` |
| an amount per file of a `configurator-file-input` | `price + 2 * file` |
| the variant price per unit of area of a `configurator-dimension` | `price * width * height` |
| an amount per unit of area | `price + 40 * width * height` |
| a percentage more, such as 40% | `price * 1.4` |
| a percentage less, such as 10% | `price * 0.9` |
| a fixed price | `25` |
| at least a price, such as 50 | `max(…, 50)` around the formula |
| rounded to a whole number, or up | `round(…)`, `ceil(…)` around the formula |

On a field with choices, each choice is its name, a `|` and its formula: `Walnut|price * 1.4`. A choice without a formula keeps the price.

More in [the guide](https://www.smootify.io/docs/features/product-configurator).

## Where it can go

- **Inside** [`smootify-add-to-cart`](https://www.smootify.io/docs/reference/elements/smootify-add-to-cart).
- **Out of place,** Smootify removes it from the page.

## What it requires

- The **server plan**: on other plans Smootify removes the element from the page.
- The **Product configurator** extension (server plan, the extension activated in the Smootify dashboard, the licensed domain). Without it, its markup is removed from the page.

## Attributes on the element

- **It reads** `data-formula`.