Autofocus for Input components

Simplify user flow with input fields by applying Autofocus option and Focus interaction features.

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 builder option to hide the Dialog for now

• Go 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.