# Logic / Conditional

Enhance your forms with dynamic branching based on user input using Superform's logic-based navigation attributes. This guide will walk you through the necessary steps to set up and use these powerful features.

## Setup 

To utilize logic-based navigation, the following attributes are essential:

* `sf-goto`
* `sf-logic`
* `sf-logic-goto`
* `sf-logic-fallback`

These attributes must be used together to enable dynamic navigation within your form.

### Attributes and Usage

#### 1. sf-goto

**Purpose:** Initiates the navigation logic. 

**Value:** `logic()`

#### 2. sf-logic

**Purpose:** Defines the condition for the navigation. 

**Value:** JavaScript expression or step data variable (e.g., `$f.age > 18`).

#### 3. sf-logic-goto

**Purpose:** Specifies the step to navigate to if the logic condition is met. 

**Value:** Step name (e.g., `step-adult`).

#### 4. sf-logic-fallback

**Purpose:** Specifies the fallback step if the logic condition is not met. 

**Value:** Step name (e.g., `step-minor`).

### **Where to Use**

* Navigation elements
* Radio buttons or radio button groups
* Checkboxes or checkbox groups

### **Overview**

* **Dynamic Branching**: Define navigation paths based on user inputs and[^1] form data.
* **Form Variables**: utilize [$s (step index)](https://deltaclan.gitbook.io/superform/essentials/variables/step-index-usds), [$v (variables)](https://deltaclan.gitbook.io/superform/essentials/variables/scoring-variables-usdv), [$f (form data)](https://deltaclan.gitbook.io/superform/essentials/variables/form-data-usdf), and [$p (progress percentage) ](https://deltaclan.gitbook.io/superform/essentials/variables/progress-percentage-usdp)for condition checks.
* **Fallbacks**: Use `sf-logic-fallback` to define fallback steps if conditions are not met.

<div data-full-width="false"><figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2Fwxw4DAudSLwc2U6mGjSL%2Fimage.png?alt=media&#x26;token=045fe968-23da-49f2-a2f4-bc9e662e19d4" alt=""><figcaption><p>[Diagram] Outline of the flow we are going to create.</p></figcaption></figure></div>

**HTML Example**

{% code title="index.html" %}

```html
<!-- Form Container -->
<form sf="myForm">
    <!-- Step 1: Age Input -->
    <div sf-step="step-1">
        <label for="age">Enter your age:</label>
        <input type="number" name="age" id="age" required>
        <button sf-goto="logic()" sf-logic="$f.age >= 18" sf-logic-goto="step-adult" sf-logic-fallback="step-minor">Next</button>
    </div>

    <!-- Step: Minor -->
    <div sf-step="step-minor">
        <p>You are under 18 years old.</p>
        <button sf-goto="step-1">Go Back</button>
    </div>

    <!-- Step: Adult -->
    <div sf-step="step-adult">
        <p>You are 18 or older.</p>
        <button type="submit">Submit</button>
    </div>
</form>
```

{% endcode %}

Let's isolate the navigation element that determines the logic for better understanding:

{% code title="index.html" %}

```html
<button sf-goto="logic()"
        sf-logic="$f.age >= 18"
        sf-logic-goto="step-adult"
        sf-logic-fallback="step-minor">
    Next
</button>

<!-- 
Initiate logic,
if age is greater or equal than 18,
go to adult step,
otherwise go to minor step
-->
```

{% endcode %}

**Webflow Example**

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FdcU0i6ljLpnBygeeGXIc%2Flogic_conditional_navigation_age%3E%3D18.mp4?alt=media&token=a9896afa-1a3a-4d23-a11d-4860e479c324>" %}

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FSYNcKW98VQMeH34Vs0Yu%2Fimage.png?alt=media&#x26;token=3cfbe31a-4b42-4d3a-9e36-b9778cfc1389" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Multiple Conditions**

To handle multiple conditions leading to different steps, utilize `sf-logic-1`, `sf-logic-goto-1`, and subsequent numbered attributes (`sf-logic-2`, `sf-logic-goto-2`, etc.).&#x20;

**⚠️** **Up to 5 different logic paths**.&#x20;

Each pair (`sf-logic-x` and `sf-logic-goto-x)` allows you to define unique conditions and their corresponding target steps, enabling complex branching logic within your form.

{% endhint %}

{% hint style="info" %}
**Key Points**

* **All Attributes Are Required:** Ensure that `sf-goto`, `sf-logic`, `sf-logic-goto`, and `sf-logic-fallback` are all present and correctly set up.

* **Conditional Logic:** Use JavaScript expressions within `sf-logic` to evaluate conditions based on user inputs or variables.

* **Fallback Navigation:** Always provide a fallback step to ensure smooth navigation even when the condition is not met.

* **Combine with Reactive Variables:** Enhance user experience by combining logic-based navigation with reactive variables to display dynamic content.

* **Debugging:** Use console logs to debug logic conditions and verify navigation flows.

{% endhint %}

[^1]: