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.


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:layoutItem size="6">
    <lightning:input ... />
    <lightning:input ... />
  <lightning:layoutItem size="6">
    <lightning:input ... />
    <lightning:input ... />
| improve this answer | |
  • sfdcfox I cannot get it to honor the tabindex values. I wonder whether having a layout invalidates the tab indexes? Also the docs say -1 excludes the input from participating in the tab stops, which I also need. :/ – Shane Jun 3 at 20:50
  • So it simply doesn't work since Summer 18 and they don't intend to fix it. Also, -1 doesn't work (to exclude elements from the tab set). success.salesforce.com/… – Shane Jun 3 at 20:56
  • @Shane That's useful to know. It was in the docs before (presumably when I wrote this answer). I'm unable to delete, but I'll edit. – sfdcfox Jun 3 at 20:58
  • I am going to see if LWC can do tab stops. My customer requirement is that the form be 100% keyboard driven. I'll post my findings. – Shane Jun 4 at 0:00
  • LWC does not address this unfortunately. I even tried using QuerySelectorAll() to traverse the input fields and set the tabindex values directly via the DOM. Apparently Locker prevented this. – Shane Jun 4 at 20:52

After much research and trying various approaches, the only way to do this is to sequence the elements in your HTML DOM exactly in the order which you want the tab stops to be.

This means you have to use creative layouts to arrange the elements on the page in one way, where as the actual sequence of declaration in your HTML DOM may be different (and most likely is if you want to set custom tab stops).

Another thing to watch out for, do not set tabindex="0" on form elements (ie lightning-input, lightning-input-field, etc.).

The input fields automatically are included in the tab sequence.

If you add the attribute then it will add a tabindex on the surrounding xml element which in practice puts two tab stops on your input field.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.