# Cheatsheet

## Summary

↳ [#essential-attributes](#essential-attributes "mention")

↳ [#variables](#variables "mention")

***

## Essential attributes

<table><thead><tr><th width="192">Attribute</th><th width="200">Options</th><th>Description</th></tr></thead><tbody><tr><td><code>sf</code></td><td>Any valid form name</td><td>Mounts the Superform library to a specific form in Webflow. Supports multiple Superforms on a page.<br><a href="form-container">Learn more</a>.</td></tr><tr><td><code>sf-step</code></td><td>Any valid step name</td><td>Defines individual steps within the form.<br><a href="step-container">Learn more</a>.</td></tr><tr><td><code>sf-goto</code></td><td><code>next</code>, <code>back</code>, <code>prev</code>, <code>+1</code>, <code>-1</code>, <code>step-name</code>, <code>logic()</code>, <code>hook(hookName)</code></td><td>Directs navigation to specified steps or based on custom logic or hooks. <a href="navigation-overview">Learn more</a>.</td></tr><tr><td><code>sf-force-goto</code></td><td><code>true</code></td><td>Ability to use <code>sf-goto</code> outside of form steps. <a href="../navigation-overview#forced-navigation">Learn more</a>.</td></tr><tr><td><code>sf-logic</code></td><td>JavaScript Logic</td><td>Evaluates JavaScript expressions to determine navigation paths based on form data or conditions. Supports multiple conditions by using suffixes (e.g., <mark style="color:purple;"><code>sf-logic-1</code></mark>, <mark style="color:purple;"><code>sf-logic-2</code></mark>).<br><a href="navigation-overview/logic-conditional">Learn more</a>.</td></tr><tr><td><code>sf-logic-goto</code></td><td><code>step-name</code></td><td><p>Specifies the step to navigate to if the associated <mark style="color:purple;"><code>sf-logic</code></mark> condition is true. Supports corresponding multiple rules with </p><p>suffixes (e.g., <mark style="color:purple;"><code>sf-logic-goto-1</code></mark>, <mark style="color:purple;"><code>sf-logic-goto-2</code></mark>).<br><a href="navigation-overview/logic-conditional">Learn more</a>.</p></td></tr><tr><td><code>sf-logic-fallback</code></td><td><code>step-name</code></td><td>Defines a fallback step if none of the <mark style="color:purple;"><code>sf-logic</code></mark> conditions are met. <a href="navigation-overview/logic-conditional">Learn more</a>.</td></tr><tr><td><code>sf-reset</code></td><td><code>true</code></td><td>Resets the form's data, progress and takes the user back to the first step. <a href="reset">Learn More</a>.</td></tr><tr><td><code>sf-checkbox-group</code></td><td><code>group-name</code></td><td>Groups together a set of checkboxes. <a href="checkbox-groups">Learn More</a>.</td></tr><tr><td><code>sf-el</code></td><td><code>progress-bar</code></td><td>Tags a form element that will be used as a native progress bar. <a href="progress-bar">Learn More</a>.</td></tr></tbody></table>

***

## Variables

<table><thead><tr><th width="183.33333333333331">Variable</th><th width="340">Description</th><th>Usage</th></tr></thead><tbody><tr><td><code>$f</code></td><td>Represents the form data values within Superform</td><td>$f.fieldName</td></tr><tr><td><code>$s</code></td><td>Reveals current step index</td><td>$s </td></tr><tr><td><code>$p</code></td><td>Tracks the progress percentage (%)</td><td>$p</td></tr><tr><td><code>$v</code></td><td>Scoring variable</td><td>$v.variableName</td></tr><tr><td><code>$v._rank</code></td><td>Automatically ranks scoring variables based on their values in descending order</td><td>$v._rank[<em>number]</em></td></tr></tbody></table>