Enter & Backspace Bindings (↩, ⌫)

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

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().

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.

HTML Example

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

Webflow Example

---

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.

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.

HTML Example

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