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

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

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.

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

HTML Example


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.

Last updated