# 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**](https://deltaclan.gitbook.io/superform/reactivity/update-text) 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**](https://deltaclan.gitbook.io/superform/reactivity/update-text) 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** ](https://deltaclan.gitbook.io/superform/reactivity/visibility)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**](https://deltaclan.gitbook.io/superform/reactivity/class-toggle) 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**](https://deltaclan.gitbook.io/superform/reactivity/update-text) and [**Score Setup & Calculation**](https://deltaclan.gitbook.io/superform/score-tracking/score-setup-and-calculation) 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**](https://deltaclan.gitbook.io/superform/reactivity/class-toggle) feature and [**Progress Percentage ($p)**](https://deltaclan.gitbook.io/superform/essentials/variables/progress-percentage-usdp) 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](https://deltaclan.gitbook.io/superform/essentials/variables))

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

***