What defines which input the "Tab" button goes to next?

In my app I have multiple text inputs within their own groups so that they look good in responsive mode (stack above eachother with proper margins and the proper title listed above it). However when I am testing them and filling them in, when I hit “Tab” on my keyboard to jump from Input one to Input two, it skips past an input. In this picture you can see how I have the form set up. I want the person to be able to type in the top left input, and then when they hit Tab it goes to the top right input, then Tab again goes to the bottom left, etc.

Currently the Tab button goes from top left to bottom left (goes through the inputs vertically). Is there a way to control which element the Tab button jumps to? (is a group for each input not recommended?)

The algorithm is trying to be smart and goes from left to right, top to bottom. It’s treating groups independently though, so if you’re not happy about the result, you can group elements and it will change. For instance, put contact first name and academy phone number in a group and it’ll go from first name to phone number.

2 Likes

Got it, thanks!