[SalesForce] Setting Tab Order in Lightning Component input fields

Is there a way to set the tab order for input fields on a Lightning Components?
Currently the order is across and down through the form and we would like it to go down first and then across.

Best Answer

You cannot directly control the tab order in Lightning any longer. This is documented in the Known Issue.

Please don't use tabindex values aside form 0 and -1.

If you want to change the tab order on the page, change the dom order.

Original Answer

Set the tabindex parameter for each element, such as:

<lightning:input tabindex="10" ... />
<lightning:input tabindex="30" ... />
<lightning:input tabindex="20" ... />
<lightning:input tabindex="40" ... />

(The browser will go to each increasingly higher index on each tab).

Or, you can lay out two blocks side-by-side, going down; this means that the page will tab downwards. That might look like this:

<lightning:layout>
  <lightning:layoutItem size="6">
    <lightning:input ... />
    <lightning:input ... />
  </lightning:layoutItem>
  <lightning:layoutItem size="6">
    <lightning:input ... />
    <lightning:input ... />
  </lightning:layoutItem>
</lightning:layout>