Tab sequence

Overview

Tab Sequence tab
Form Editor - Tab Sequence Tab

The Tab Sequence tab in the Form Editor is used to define and manage the order in which focus moves across the form’s fields and interactive components when the user presses the Tab key. This ensures a logical and user-friendly navigation flow, especially important for data entry forms and accessibility compliance.

Sections

Available Elements (Left panel)

This panel lists the form elements that are available but not currently included in the tab sequence. When an element is removed from the tab sequence, it will appear here.

Selected Elements (Right panel)

Shows the elements that participate in the tab sequence, listed in the current order of navigation. Each entry includes:

  • Component type, such as WebComponent.

  • Name (for example, firstName_label).

  • Component class, like bootstrapcomponents-textbox.

Control Buttons

  • >> / << — Move selected elements between the Available and Selected lists.

  • Up / Down — Reorder elements in the tab sequence.

  • Default — Restore the default tab order (appears enabled only if the current order differs from the default).

Using the Tab Sequence

Tab Sequence usage demo
Working with the Tab Sequence tab

To define a custom tab sequence for your form:

  1. Rearrange elements:

    • In the Selected elements list, use the Up and Down buttons to change the order in which the focus will move as the user presses Tab.

  2. Remove from sequence:

    • Select elements and click << to move them to the Available elements list. They will be skipped during tab navigation.

  3. Re-add to sequence:

    • Select elements in Available elements and click >> to place them back into the tab sequence.

  4. Restore default:

    • If needed, click Default to revert to the original tab order generated by the designer.

Last updated

Was this helpful?