> For the complete documentation index, see [llms.txt](https://deltaclan.gitbook.io/superform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deltaclan.gitbook.io/superform/essentials/navigation-overview/direct.md).

# 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. 

{% hint style="warning" %}
**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.

{% endhint %}

***

## 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.

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FrO7wFB5LZUEUYL4SrIuF%2FCleanShot%202024-06-12%20at%2021.46.15%402x.png?alt=media&amp;token=828ac5c5-96f7-41bb-82d1-78caa5759f44" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FdVh4tBNiVLJBgYkWH0i2%2FCleanShot%202024-06-12%20at%2021.53.46%402x.png?alt=media&amp;token=58c6f95b-c48e-4208-bf09-376e6e89c77e" alt=""><figcaption><p><code>sf-goto = step-pricing</code> on the radio group that we want to act as a navigation element.</p></figcaption></figure>

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FgKbs9DMV8Ey28znKBg1z%2FCleanShot%202024-06-12%20at%2021.51.58%402x.png?alt=media&amp;token=5bc074a1-f5da-4aa6-8e4b-e93cfd9b9db9" alt=""><figcaption><p>Checking the name of the desired step to navigate to, in this case <code>sf-step = step-pricing</code><br></p></figcaption></figure>

### 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.