> 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/hook.md).

# Hook

Navigation hooks — connect JavaScript logic to determine next steps.

## Setup

**Attribute:** `sf-goto = hook(HOOK_NAME)`

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

**Description:** Determine the next move with JavaScript logic.

***

## Initialization

1. Add the `sf-goto="hook(HOOK_NAME)"` attribute to your navigation element, such as the next button. 
2. Then, register the hook using the [**Superform API**](/superform/js-sdk/superform-instance.md). See the example below.

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

```html
<!-- Form Container -->
<form sf="myForm">
    <!-- Step 1: Booking Type Selection -->
    <div sf-step="step-1">
        <p>Select your booking type:</p>
        <input type="radio" name="bookingType" value="Business"> Business<br>
        <input type="radio" name="bookingType" value="Economy"> Economy<br>
        <button sf-goto="hook(checkBookingType)">Next</button>
    </div>
    <!-- Step: Business -->
    <!-- Step: Economy -->
</form>
```

{% endcode %}

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

```javascript
// Wait until Superform is ready
window.SuperformAPI = window.SuperformAPI || [];
window.SuperformAPI.push(({ getForm, allForms }) => {
    // Assuming you already configured Superform with a name
    const myForm = getForm("myForm");

    myForm.registerNavigationHook("checkBookingType", (params) => {
        console.log(params.data); // Returns form data
        console.log(params.stepCount); // Returns current step index
        console.log(params.progress); // Returns current progress percentage
        console.log(params.scores); // Returns scores object

        /**
         * Here I'm checking what booking type the user has selected.
         * Based on that, returning the next step details.
         **/
        if (params.data.bookingType === "Business") {
            return "business_step";
        } else {
            return "economy_step";
        }
    });
});
```

{% endcode %}

{% hint style="info" %}
**Pro Tip**

* Navigation hooks also support async returns, meaning you can return a promise that resolves to a string or number.
* You can also chain hooks, meaning a hook can return a new hook instruction. For example, instead of returning a step name or step index, you can return `hook(NEXT_HOOK)`.

{% endhint %}

***

## Attribute Configuration

Configuring navigation does not require any extra attributes. Just ensure the attribute key is `sf-goto` and the value is `hook(HOOK_NAME)`. Here are some instructions to keep in mind:

* The hook should follow the format `hook(YOUR_HOOK_NAME)`.
* Do not register multiple hooks with the same name. The default nature of hook registration is to override.
* Hook names should not contain any spaces or symbols.&#x20;

Here are some dos and don'ts:

{% hint style="info" %}
**Dos and Don'ts**

***

**Do** ✅

* `hook(my_hook)`
* `hook(hookIsAwesome)`
* `hook(callhook)`
* `hook(CALLHOOK)`

**Don't** ❌

* `hook(111111)`, don't use numbers as the start of the hook name
* `hook($$$-hook)`, don't use symbols, except for underscores
* `hook(⚡️)`, don't use emojis
* `hook(my hook is great)`, don't use spaces

{% endhint %}

→ Read more about the `registerNavigationHook` method [here](/superform/js-sdk/superform-instance.md#registernavigationhook-hookname-fn).&#x20;