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 WTF 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.
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.
$s
variable.// HTML Example
// Display progress % directly
<!-- Display $p text -->
<div>
<span sf-react="text($p)">percentage</span>%
</div>
Last updated
Was this helpful?