---
description: Customize Enter (↩) and Backspace (⌫) keys for form navigation.
---

# Enter & Backspace Bindings (↩, ⌫)



## Setup for Enter Binding (↩)

**Attribute:** `sf-bind-enter`

**Values:** `true`, `false`

**Where:** Applied to navigation elements

Binds the Enter key to trigger the 'next' action on forms. For custom behavior, apply directly to a specific button or link with navigation directives like `next` or `goto=logic()`.



{% hint style="info" %}
By default Enter Binding is **enabled globally** (binds to 'next' navigation elements).



**Override Default:** To customize, assign `sf-bind-enter="true"` or `sf-bind-enter="false"` on specific navigation elements to control its behavior explicitly.


{% endhint %}



**HTML Example**

```html
<!-- Next button with Enter key binding enabled -->
<button sf-bind-enter="true" sf-goto="next">
  Next Step
</button>
```



**Webflow Example**

{% embed url="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F1BmebH53fsZNM1hWwASW%2FCleanShot%202024-07-14%20at%2014.25.59.mp4?alt=media&token=c9685b74-3918-475c-9fb0-0b7d6b4fdb98" %}



***

## Setup for Backspace Binding (⌫)

**Attribute:** `sf-bind-backspace`

**Values:** `true`, `false`

**Where:** Applied to navigation elements

Binds the Backspace key to trigger the 'back' action, allowing users to navigate to the previous form step.



{% hint style="info" %}
By default Backspace Binding is **enabled globally** (binds to 'back', 'previous', 'prev' navigation elements)



**Override Default:** Assign `sf-bind-backspace="true"` or `sf-bind-backspace="false"` to specifically enable or disable this behavior on certain elements.


{% endhint %}



**HTML Example**

```html
<!-- Back button with Backspace key binding disabled -->
<button sf-bind-backspace="false" sf-goto="back">
  Previous Step
</button>

```



***

## Key Considerations

* **Multiple Bindings:** If multiple navigation elements are eligible for key bindings, the first encountered in the DOM order is used.
* **Conflict Resolution:** Explicit attribute settings on elements take precedence over default behaviors to ensure fine-grained control.

