# Using tab to navigate a form

**URL:** <https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074>\
**Category:** Need help\
**Created:** [October 18, 2016, 7:05pm UTC](https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074 "2016-10-18T19:05:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hi1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/hi1/32/4381_2.png) [@hi1](https://forum.bubble.io/u/hi1)\
**Post date:** [October 18, 2016, 7:05pm UTC](https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074/1 "2016-10-18T19:05:33Z")

</div>

Hi all!

I’ve had a minor usability issue that I can’t seem to solve…

When a user tries to use the tab key to move along in a form the cursor doesn’t move as expected (example: it goes from field two, up to one, down to four, then to three).

I can’t share a link at the moment because: [Is bubble working today?](http://forum.bubble.io/t/is-bubble-working-today/7070) but I thought I’d ask while we all had a bit of time.

I’ve tried reordering the layers but that didn’t seem to do the trick.

Anyone have other ideas/experience?

Thanks!  
Jen

---

<div class="post-metadata">

**Author:** ![skylershelton](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/skylershelton/32/7332_2.png) [@skylershelton](https://forum.bubble.io/u/skylershelton)\
**Post date:** [October 19, 2016, 5:41am UTC](https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074/2 "2016-10-19T05:41:12Z")

</div>

Pressing tab cycles through focus, so the solution likely lays somewhere there.

I haven’t encountered unexpected focus cycling in bubble yet and have only used the focus workflows and conditionals on a rudimentary level, so without seeing the form I can’t provide anything else

If you’ve found a solution let us know though!

---

<div class="post-metadata">

**Author:** ![dan1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/dan1/32/23411_2.png) [@dan1](https://forum.bubble.io/u/dan1)\
**Post date:** [October 19, 2016, 6:04pm UTC](https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074/3 "2016-10-19T18:04:34Z")

</div>

My initial hunch is that you have different groups surrounding elements.

Quick example: Input 1 and Input 2 are in Group A and Input 3 is outside of Group A. (All of these elements are contained in Group All). Consequently, when you hit tab from Input 1, focus moves from 1 to 2. But, since Input 3 is outside of Group A, it doesn’t move as expected. And, when you do focus Input 3, then tab, it goes back to 1.

See if this applies in the case of your app. If so, see how you can logically group together the elements into the same group.

---

<div class="post-metadata">

**Author:** ![hi1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/hi1/32/4381_2.png) [@hi1](https://forum.bubble.io/u/hi1)\
**Post date:** [October 31, 2016, 11:32pm UTC](https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074/4 "2016-10-31T23:32:06Z")

</div>

I think the issue had to do with groups!

The unfortunate thing about what I needed do to in order to get the tabbing to work as expected was give up some control over the layout when working with responsive. I still don’t understand how the order was working… I tried bringing items to the front/sending to back but that ordering didn’t seem to have any impact.

But I’ve got the tabbing working as users would expect now.

Thanks!

---

<div class="post-metadata">

**Author:** ![Macchiato](https://avatars.discourse-cdn.com/v4/letter/m/df788c/32.png) [@Macchiato](https://forum.bubble.io/u/Macchiato)\
**Post date:** [November 3, 2016, 10:06pm UTC](https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074/5 "2016-11-03T22:06:27Z")

</div>

Could @emmanuel comments on this perhaps? I’ve experienced this across the board as well.  
Pressing ‘Tab’ sometimes jumps the next input in the form, with groups. How can we control this better?

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [November 3, 2016, 10:12pm UTC](https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074/6 "2016-11-03T22:12:51Z")

</div>

This has been covered in other threads.

> [@How to define a sequence input fields?](http://forum.bubble.io/t/how-to-define-a-sequence-input-fields/585/8):
>
> Our algorithm looks at the position of each element in the current group and goes from left to right, top to bottom. So if elements are well aligned, it should just work. And grouping elements in a group is a good way to make sure elements follow each others.

---

<div class="post-metadata">

**Author:** ![Macchiato](https://avatars.discourse-cdn.com/v4/letter/m/df788c/32.png) [@Macchiato](https://forum.bubble.io/u/Macchiato)\
**Post date:** [November 3, 2016, 10:13pm UTC](https://forum.bubble.io/t/using-tab-to-navigate-a-form/7074/7 "2016-11-03T22:13:09Z")

</div>

Beautiful.
