Variables

Dynamic data interactions — an overview.

Variables ($f, $s, $p, $v) in Superform are powerful and essential components that allow you to create dynamic and interactive forms. By leveraging variables, you can craft highly responsive and user-friendly experiences.

Variables are seamlessly integrated with Reactivity to unlock a multitude of functionalities, from simple input displays to complex conditional logic and real-time calculations.

Access a variable by using $ and . — example: $f.userName or $v.scores

---

Why use Variables

The common cases:

1. Dynamic Interactions:

   • Instantly update form elements based on user input.

   • Create more engaging and responsive user experiences.

2. Conditional Logic:

   • Implement logic-based navigation and display rules.

   • Show or hide form elements dynamically.

3. Real-Time Calculations:

   • Perform calculations on-the-fly.

   • Update totals, scores, or other calculated fields instantly.

4. Data Management:

   • Access and manipulate form data effortlessly.

   • Use variables to store and manage state across your form.

---

List of Variables

$f

Form Data

Access input values directly.

Example: $f.name retrieves the value of the input named "name".

$s

Step Index

Track the current step in multistep forms.

Example: Use $s to conditionally display elements based on the user's progress.

$p

Progress Percentage

Display the user's progress as a percentage.

Example: $p can update text inside a progress bar to reflect form completion.

$v

Scoring Variable

Handle scoring and ranking in quizzes.

Example: $v.score to track quiz scores.

Pro Tip

Explore using conditional logic with $f, $s, $p, and $v to create deeply personalized and responsive form experiences. Leverage operators and expressions to create robust, condition-based updates seamlessly.