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:
Dynamic Interactions:
Instantly update form elements based on user input.
Create more engaging and responsive user experiences.
Conditional Logic:
Implement logic-based navigation and display rules.
Show or hide form elements dynamically.
Real-Time Calculations:
Perform calculations on-the-fly.
Update totals, scores, or other calculated fields instantly.
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.
Last updated