MARKETPLACE
PLUGINS
FIX TAB ORDER
Fix Tab Order logo

Fix Tab Order

Published July 2020
   •    Updated January 2026

Plugin details

A simple plugin to fix the 'Tab' order of elements on a page.
Using the Automatic Ordering option you can easily fix the order elements are focused when using the Tab key on the keyboard to jump through inputs and you can choose which object types should be included (eg. Text Input, Dropdown, etc). You can also skip over individual elements if required, or even add a custom order for elements and define the exact order you want your elements to be focused when pressing the Tab key.

Massive nod to the thread @ https://forum.bubble.io/t/how-to-define-a-sequence-input-fields/585/29 in helping me with a solution to problem that was annoying me somewhat!

I thought it would probably be easier to create this as a plugin so you don't have to wrestle with the Javascript yourself.

Free

For everyone

4.4 stars   •   14 ratings
8.9K installs
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Stuart B logo
Stuart B
Joined 2019   •   8 Plugins
View contributor profile

Instructions

Add the TabFix element to the page (this will be invisible).
Either:
In the Automatic Order section select the object types you want to be able to tab through and add a comma-separated list of (.)classes / (#)element IDs you want to skip.

Or:
In the Custom Order section tick the box and enter a comma-separated list of element IDs in the order you want them to be tabbed through on the page.


Note, if you are going to use element IDs for either skipping or setting a custom order you will need to first follow the below instructions:

1. Open the Settings for your Bubble app and open the General tab
2. Check 'Expose the option to add an ID attribute to HTML elements' option
3. Add a unique element ID to the 'ID Attribute' option at the bottom of the Property Editor for each Bubble element you need to specify

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:

Resources

Support contact
Tutorial

Rating and reviews

Average rating (4.4)

Does not work
August 22nd, 2023
almost perfect
February 10th, 2022
Excellent plugin and functional except the icons which are not ignored regardless of the choice in the plugin settings.
Its amazing
January 18th, 2022
this saved me so much frustration. Works also very easily. Thanks for creating this.
Quick and Easy
December 24th, 2021
Using the new responsive editor, and it seems to work for me.
Doesn't work for me
December 21st, 2021
Maybe the new responsive engine broke some things?
Bubble