# Variables

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](https://deltaclan.gitbook.io/superform/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

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><code>$f</code></td><td><p><strong>Form Data</strong></p><p></p></td><td><p>Access input values directly.</p><p></p><p>Example: <code>$f.name</code> retrieves the value of the input named "name". </p></td><td><a href="variables/form-data-usdf">form-data-usdf</a></td><td></td></tr><tr><td><code>$s</code></td><td><strong>Step Index</strong></td><td><p></p><p>Track the current step in multistep forms.</p><p><br>Example: Use <code>$s</code> to conditionally display elements based on the user's progress.<br></p></td><td><a href="variables/step-index-usds">step-index-usds</a></td><td></td></tr><tr><td><code>$p</code></td><td><strong>Progress Percentage</strong></td><td><p></p><p>Display the user's progress as a percentage.</p><p></p><p>Example: <code>$p</code> can update text inside a progress bar to reflect form completion. </p></td><td><a href="variables/progress-percentage-usdp">progress-percentage-usdp</a></td><td></td></tr><tr><td><code>$v</code></td><td><strong>Scoring Variable</strong></td><td><p></p><p>Handle scoring and ranking in quizzes.</p><p></p><p>Example: <code>$v.score</code> to track quiz scores. </p><p></p></td><td><a href="variables/scoring-variables-usdv">scoring-variables-usdv</a></td><td></td></tr></tbody></table>

{% hint style="info" %}
**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.

{% endhint %}