Direct

Direct form navigation.

Setup

Attribute: sf-goto

Value/Options: next, prev or back, +1, -1, step-name

Where: Navigation elements, radio buttons, or radio button groups, checkbox or checkbox groups.

Description: Enables straightforward navigation or teleportation to specific steps in a form.

Avoid numbers-only as step name(s).

❌ sf-step = 2

✅ sf-step = step-2 or step2 or step-two or s2

✅ use names semantically so other developers can understand your way of thinking.

---

When and How

Different direct navigation methods for different usecases.

Linear

sf-goto = next | back | prev

• Next Step: Move to the next step in a linear sequence.

• Previous Step: Move to the previous step in a linear sequence.

Example Use Cases: Basic multi-step forms like registration, surveys, or checkout processes.

Step Teleport (name)

sf-goto = step-name

• Specific Step: Navigate directly to a named step.

Example Use Cases: Forms with non-linear paths where users can jump to a specific section based on the step name.

sf-goto = step-pricing on the radio group that we want to act as a navigation element.

Checking the name of the desired step to navigate to, in this case sf-step = step-pricing

Step Teleport (number)

sf-goto = +1 | -1 | +5 | -3 | +10 and so on..

• Jump Forward: Skip ahead by a specified number of steps.

• Jump Backward: Move back by a specified number of steps.

Example Use Cases: Forms where users can skip optional steps or return to a previous section for review.