Logic / Conditional
Conditional navigation — based on logic.
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 form data.
Fallbacks: Use
sf-logic-fallback
to define fallback steps if conditions are not met.
HTML Example
Let's isolate the navigation element that determines the logic for better understanding:
Webflow Example
Last updated
Was this helpful?