Update Text

Dynamic text reactivity — anywhere inside an instance.

Enhance your form's interactivity by dynamically updating text content based on user inputs. With the text() reactivity attribute, you can seamlessly bind form data and variables to any text element, providing real-time updates as users interact with your form.

Setup

Attribute: sf-react = text(expression) (see What is an expression?)

Where: any text element (like <span>, <div>, or <p>) within the form where you want the text to dynamically update based on form data or user inputs.

Pro Tip

It's particularly effective when used to display real-time changes based on form data and variables such as $f, $v, $s, $p (see Form Data & Variables).

You can inject JavaScript expressions directly, leveraging operators like >, <, ==, ===, and the ternary ?: operator in sf-react to enable robust, condition-based visibility updates—perfect for interactive, responsive form elements.

Implement logical operators (&&, ||, !) to combine conditions, enhancing the complexity as needed while ensuring they result in a boolean outcome.

---

Examples

1. Dynamic Text: Display a welcome message using a user's name from the form.

// HTML Example
// Directly displays the name entered in the form.

<!-- Text input for name -->
<input type="text" name="name" placeholder="Enter your name:">

<!-- Text display -->
<p>Hello, <span sf-react="text($f.name)"></span>!</p>

2. Conditional text based on a form input.

// HTML Example
// Conditionally displays text based on the age entered in the form.

<!-- Numeric input for age -->
<input type="number" name="age" placeholder="Enter your age">

<!-- Conditional text display -->
<p sf-react="text($f.age >= 18 ? 'Adult' : 'Minor')"></p>

3. Display text using the $s variable.

// HTML Example
// Display progress % directly

<!-- Display $p text -->
<div>
<span sf-react="text($p)">percentage</span>%
</div>