Hi all -
I'm trying to optimize an input form and trying to change the sequence the user can change between the input fields using the 'tab' key. I think the word would TabIndex which I couldnt find in the forum.
Is there a function to change the tab index? Maybe I'm missing the right word for it.
Many thanks!
Hey @Lukas!
I'm moving this to the feature requests section since it doesn't look like this is currently possible to do within Retool. I'd like to point out though that changing the tab index of your components can cause issues with users who interact with your page using assistive technology (as is mentioned here). Is there a particular reason that you're looking to have your components be tabbed through in a different order than how they appear on the screen?
@karbirdas we would also like to specify / control tab order as well, outside of screen order. We have a data entry app, and we need to be able to:
Thanks for the +1 @bwdsl!
I've passed the information along to our dev team and will let you know here if/when it gets picked up.
In the meantime can you describe a bit more the case in which you would want a field to be skipped? This may be possible by disabling the components and having users manually enable them for editing 
Hey all, I've gotten confirmation that we'll continue to follow accessibility best practices for tab order, which should always match visual order. Allowing for customization would disrupt that so we currently don't have plans to do so.
@Kabirdas can you describe that process (disable component and having user manually enable them for editing?)
Definitely! When a component is disabled it is removed from the tab order, since you can conditionally disable components by passing dynamic values to that field using {{}} you can link this to a control where you set which fields are editable. Below is an example using a switch group component.
First set the disabled property to check whether the currency switch is set to true:
Then note that when it's off the component is disabled and leaves the tab order:
Note that the default values of the control can be dynamically set as well! Here they're linked to a table but there are certainly other ways you can set it up. If you'd like to share more about you're use case maybe there's a way that'll work better for you!
Here the code {{ _.keys(_.pickBy(table2.selectedRow.data, _.identity) }} returns an array of the table columns which are marked as true for the selected row, e.g. ["number", "text"].
@Kabirdas thank you I will check this out! Meanwhile, I found a related bug for you to share with your developers. I have a text input field with a checkbox field next to it which I want to skip when I tab. The checkbox field has a Tool Tip on it. When I press tab to exit the text input field, the cursor is now on the checkbox field's Tool Tip(!) even though the checkbox itself is skipped!
If you'd like for the tooltip to be skipped as well can you try conditionally hiding it based on whether the component is disabled or not? You can pass a ternary to the tooltip field in {{}}, as long as it evaluates to the empty string "" the tooltip should be skipped:
