# configurator-input

> Text input whose formula step is on while its value is valid, with its length as variable. 2.0: also letters, its characters without spaces ("Studio Rossi": length 12, letters 11).

Status: Ready (Smootify 2.0)  
Plan: Server plan  
Add-on: Product configurator  
URL: https://www.smootify.io/docs/reference/elements/configurator-input  
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).
- **Must contain one of** `input`, `textarea`.
- **Out of place,** Smootify removes it from the page: also when the add-to-cart has no smootify-product ancestor.

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

## Fields in the form

Each field’s **Name** setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.

| Name | Field | What it does |
|---|---|---|
| the `data-name`, else the `name`, of the first named element | any field | The step name the formulas use. |

## Attributes on the element

- **It reads** `data-formula`.
- **Smootify writes** `data-formula` on it: do not set them yourself.