WTF is an expression ? 🆕

For no-code and low-code users who want to build smarter forms without writing code.

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:

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

<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 reactivity for more information and Webflow examples!

🧮 Show total price

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

Refer to Update Text reactivity for more information and Webflow examples!

🔞 Show warning if underage

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

Refer to Visibility reactivity for more information and Webflow examples!

🟩 Highlight selected plan

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

Refer to Class Toggle feature for more information and Webflow examples!

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

<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!".

Refer to Update Text and Score Setup & Calculation feature for more information and Webflow examples!

🪜 Highlight the active step visually (advanced)

<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 feature and Progress Percentage ($p) 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)

Variable	Meaning
$f	Form data (like $f.name, $f.email, etc)
$s	Current step index (useful in multistep forms)
$p	Progress value (%)
$v	Score variables ($v.totalScore, etc)

🛠️ Reactivity features

Function	What it does
text(value)	Updates the element’s text
value(value)	Sets the value of an input or element
visibility(condition)	Show/hide the element
class(condition, 'classname')	Adds a class if true
attr(value, 'attribute')	Sets a custom attribute

---