# WTF is an expression ? 🆕

## Definition

An **expression** is a tiny formula that tells Superform:

> “Watch this input, and when it changes… do something.”
>
> or
>
> “If this happens ➜ do that.”

It’s just logic. Like what you’d use in a calculator or spreadsheet:

```js
2 + 2         // → 4
$f.age > 18   // → true
$f.price * $f.quantity  // → 2 * 18 = 36
```

You use expressions **inside attributes** like `sf-react` and Superform updates the DOM (HTML elements) automagically.

## Example expressions

### 👋 Live name preview

```html
<p>Welcome back <span sf-react="text($f.name)">Name</span></p>
```

→ `$f.name` comes from an `<input name="name">`.

→ Updates the span with what the user typed in the `name` input.

Refer to [**Update Text**](/superform/reactivity/update-text.md) reactivity for more information and Webflow examples!

### 🧮 **Show total price**

```html
<p>Total: <span sf-react="text($f.price * $f.quantity)">0</span>€</p>
```

→ `$f.price` and `$f.quantity` come from `<input name="price">` and `<input name="quantity">`.

→ Calculates and displays `price × quantity` as the user types/selects quantities.<br>

Refer to [**Update Text**](/superform/reactivity/update-text.md) reactivity for more information and Webflow examples!

### 🔞 Show warning if underage

```html
<div sf-react="visibility($f.age < 18)">
  <p>You must be 18+ to continue.</p>
</div>
```

→ `$f.age` comes from an `<input name="age" type="number">`.

→ Shows the message only if the entered age is under 18.<br>

Refer to [**Visibility** ](/superform/reactivity/visibility.md)reactivity for more information and Webflow examples!

### 🟩 Highlight selected plan

```html
<div sf-react="class($f.plan === 'pro', 'active')">Pro Plan</div>
```

→ `$f.plan` comes from a group of radio buttons or a `<select name="plan">`.

→ Toggles the `active` class when the selected plan is `"pro"`.<br>

Refer to [**Class Toggle**](/superform/reactivity/class-toggle.md) feature for more information and Webflow examples!

### ✅ Show message based on score with ternary operator (advanced)

```html
<p sf-react="text($v.score > 5 ? 'Great job!' : 'Keep going!')">...</p>
```

→ `$v.score` is a custom score variable calculated using `sf-score-calc`.

→ Shows `"Great job!"` if the score is above 5, otherwise `"Keep going!"`.<br>

Refer to [**Update Text**](/superform/reactivity/update-text.md) and [**Score Setup & Calculation**](/superform/score-tracking/score-setup-and-calculation.md) feature for more information and Webflow examples!

### 🪜 Highlight the active step visually (advanced)

```html
<div sf-react="class($s === 2, 'active-step')">Step 3</div>
```

→ `$s` is the current step index (starts at 0).

→ Adds the `active-step` class only when you're on Step 3 (index 2).

Useful for styling progress indicators, steppers, or conditional content blocks.

Refer to [**Class Toggle**](/superform/reactivity/class-toggle.md) feature and [**Progress Percentage ($p)**](/superform/essentials/variables/progress-percentage-usdp.md) variable for more information and Webflow examples!

***

## What can I use inside Expressions

Inside expressions, you can combine:

* ✅ **Superform variables** like `$f`, `$s`, `$p`, and `$v`
* ✅ **Superform functions** like `text()`, `value()`, `visibility()`, `class()`, and `attr()`
* ✅ **Basic JavaScript logic** like math, comparisons, strings, and ternary operators

🧠 **Variables overview** (see [Variables](/superform/essentials/variables.md))

<table><thead><tr><th width="181.20001220703125">Variable</th><th>Meaning</th></tr></thead><tbody><tr><td><code>$f</code></td><td>Form data (like <code>$f.name</code>, <code>$f.email</code>, etc)</td></tr><tr><td><code>$s</code></td><td>Current step index (useful in multistep forms)</td></tr><tr><td><code>$p</code></td><td>Progress value (%)</td></tr><tr><td><code>$v</code></td><td>Score variables (<code>$v.totalScore</code>, etc)</td></tr></tbody></table>

#### 🛠️ Reactivity features

<table><thead><tr><th width="293.2000732421875">Function</th><th>What it does</th></tr></thead><tbody><tr><td><code>text(value)</code></td><td>Updates the element’s text</td></tr><tr><td><code>value(value)</code></td><td>Sets the value of an input or element</td></tr><tr><td><code>visibility(condition)</code></td><td>Show/hide the element</td></tr><tr><td><code>class(condition, 'classname')</code></td><td>Adds a class if true</td></tr><tr><td><code>attr(value, 'attribute')</code></td><td>Sets a custom attribute</td></tr></tbody></table>

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deltaclan.gitbook.io/superform/additional-resources/wtf-is-an-expression.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.