Autofocus / Focus features simplify user workflow with forms by allowing input fields to gain focus automatically when needed. This improves the overall user experience by reducing unnecessary clicks and providing more efficient data entry.
Most forms begin with an input field - like 'Email address' in our example, and having it autofocused helps users start typing immediately.
Autofocus component option
The Autofocus component option allows an input field to automatically receive focus when a page or form loads. This is particularly useful in cases where the first input field in a Form (e.g., a 'Name' or 'Email' field) is the primary (and likely required) entry point for users.
To apply autofocus, simply activate the 'Autofocus' checkbox in the component’s options. Once enabled, the selected input field will automatically receive focus when the form is rendered on the page.
This is also helpful for forms in dialogs, sidebars, or anywhere that quick user input is required.
Focus interaction type
Focus interaction allows focus to be dynamically assigned to an input field based on specific user actions. This interaction is useful when a Form involves multiple steps or dependent inputs that need to be completed in a sequence. It can be triggered by various actions, such as selecting an item in a dropdown or checking a checkbox.
Use case example
We can easily build a quick interaction flow using a Dialog component and another Form within it:
Add a Dialog component to the Form, and replace the default components inside of an open window with Form and Price input.
Turn off
Visible in builderoption to hide the Dialog for nowGo back to Form and add a few interactions, so that onActionSuccess (submitted form, in such case) the Dialog is shown with Focus on the Price input:
After a user submits the form, before proceeding to the next page, they will be shown a dialog window asking if they would like to donate. The Focus interaction will automatically shift to the Price input field
Supported input components
Autofocus and Focus can be applied to various input components, allowing flexibility across different form designs. The following input types support these features:
Text input
Text area input
Password input
URL input
Email input
Phone input
Number input
IBAN input
Decimal input
Price input
With the Autofocus option and Focus interaction, your forms can become more dynamic, responsive, and adaptive to the needs of users. For instance, the first input field in a back-office drawer sidebar or a dialog can be automatically focused for immediate interaction. Similarly, after selecting an item in a Select or Autocomplete component, the focus can move to the next input field. These features reduce clicks and guide users through form completion more smoothly.