Navigation - Overview

Step navigation and teleport — powerful & flexible.

Summary

↳ Direct Navigation

↳ Logic-Based Navigation

↳ Hooks Navigation

↳ add-on Forced Navigation

Attention!

Please read carefully the instructions below, as the powerful sf-goto can be used in a magnitude of cases with various setups. We are on track to release many examples and videos to showcase every possible combination.

new add-on Forced Navigation: ability to place sf-goto outside of form steps!

---

Methods Overview

Superform’s navigation capabilities are versatile, designed to accommodate a wide range of form setups. Explore the distinct features of each method below.

Direct Navigation

sf-goto can be applied to navigation elements, allowing for navigation between form steps, including next , back , +1 , -1 , or specific steps by name (step-name) for step teleport. This provides flexible navigation options. You can teleport by +X number or just assigning the step-name as a value. → How to: Direct Navigation

Logic-Based Navigation

sf-goto=logic() navigation combines the sf-logic and sf-logic-goto attributes, allowing for dynamic branching based on logic conditions. If a logic condition is met, navigation proceeds to the step specified by sf-logic-goto. Otherwise, a fallback step can be defined by sf-logic-fallback. → How to: Logic / Conditional Navigation

Hooks Navigation

sf-goto=hook(hookName) can trigger a specific hook registered in the code by specifying hook name. This provides a way to integrate programmatic navigation actions, allowing for customized navigation flows. → How to: Hooks Navigation

Forced Navigation

new add-on

sf-force-goto to enable navigation controls outside form steps. Use the attribute in conjunction with sf-goto. This combination allows the external elements to navigate through form steps seamlessly.

⚠️ Works in conjuction with your normal sf-goto.

⚠️ Note that keyboard navigation is not supported for elements using sf-force-goto.

Step Validation Before navigating to the specified step, sf-goto validates the current step to ensure all required inputs are completed.

Flexible Navigation The interplay between sf-goto, sf-logic, and sf-logic-goto supports both straightforward and dynamic navigation, ensuring forms can handle everything from simple step transitions to complex branching logic.