Display First Tab by default


I have 4 tabs which are activated when a user selects a checkbox.

The problem I'm having is, if the user selects two check boxes, two tabs will display but the final tab will display by default. Is there a way to display the first tab by default.

Some users will forget that their are two tabs in which they need to fill information in and move onto the next wizard, I think it would be good to display the first tab and interact with other tabs consecutively.

Hello @DryChips,

What container are you using? Tab, Wizard, Accordion? Please share the screenshot of the form.


I am using Tab control.

As you can see, the last tab ('Emergeny details') tab is highlighted but I would rather have the first tab highlighted ('Name') by default when user moves to the 'Change Details' wizard.


You can set the first tab as active when a user moves to the 'Change Details' step using the code:

fd.container('Wizard0').widget.$on('on-change', function(prevIndex, newIndex) {
        //2 is the index of the 'Change Details' step
        if(newIndex == 2){
                //setting the first tab as active
1 Like

Hi Margarita, it is possible to make this code more dynamic? In the sense that if you show and hide certain tabs?

So if users only select "Home Address" && "Emergency contact details" then I want it set the Home address field first by default.

Hello @DryChips,

You can remove/add steps dynamically using the code depending on the fields' values. Find the example on Wizard container page.