How-To Use The Tab Indexing Configuration

The Tab Indexing configuration option found in most of the visual Spark controls allows the user to tab through the controls. While tabbing through the page (pressing TAB keyboard button), a control will gain focus (user can perform actions on it) when tabbing to it. The order of tabbing through a page is defaulted by browser, but can be manipulated within a Spark control. 

Default Browser Tabbing

Tabbing functionality is provided in the main browsers used, including: Chrome, Firefox, Internet Explorer/Edge, Opera, and Safari. HTML5 allows the tabindex attribute to be used on any HTML element. Depending how the elements are arranged on the page, the tab default indexing will differ, but it moves from left to right, then top to bottom, unless nested in a container.

The below example shows default tabbing when using containers. Text boxes 1 through 3 are within a Vertical Layout Section, and Text Boxes 4 through 6 are in another. Both Vertical Layout Sections are nested within a Horizontal Layout Section. The left-most Vertical Layout will be tabbed into first, and then the nested controls will be tabbed through. After the nested elements of the left container are finished the same pattern will repeat for the right container.

Here is the example of this behavior:

Tabbed Once


Tabbed Twice


Tabbed Three Times


Tabbed Four Times

Tab Index Configuration Option


Spark controls that expect user focus (Text, Integer, Radio Button, etc.) will have the Tab Index behavior Configuration option. The value provided within the Tab Index will be sequence index that page tabbing will follow. 

Note, the tab index sequence begins at 1, not 0. If the same index is used multiple times, the tabbing will prioritize all controls with the same index taking a default pattern.

The Text Box placeholders in the following example identify which tab index is applied to the control:

The Tabbing sequence in this example will follow: Text 1 > Text 4 > Text 2 > Text 3 > Text 5 > Text 6

Tabbing Within a Table

The default behavior for tabbing within a table is move from the first column of a table to the last column inside a single row. After the last column is tabbed into, the next element will be the first column of the second row. 

If custom tab indexing is applied to controls within the table, all rows within a column will get first priority. For example:

The Table sequence in this example will follow: All rows within Text 1 column > All rows within Text 2 column > All rows within Text 3 column


For detailed information on the Tab Index method see, access the JS Doc file.

Was this article helpful?
0 out of 0 found this helpful