icon Tabs

The Tab container organizes form content in tabs.

Tabs preview

You can add as many tabs as you need. To add a new tab, simply click on the plus symbol:

Add a tab

This page contains a detailed description of the container properties and JavaScript samples that you can use with this container.


Here you can find properties specifically related to the Tabs container.


A unique identifier for the container.

Name property


The Name property allows to work with the container via JavaScript code, like this:

   //hide container


The property defines the width of the container in pixels.

If left blank, the container takes up the entire available width in the current grid cell.

Width property


The property defines tabs position relative to the content inside.

Orientation property

Select tabs position form the dropdown:

  • Top:

    Top orientation

  • Left:

    Left orientation

  • Bottom:

    Bottom orientation

Tab title

The property defines the header of a tab.

Tab title property


In this section, you can find basic examples of how to work with the containers using JavaScript.

If you are not familiar with the JavaScript framework, get started with the JavaScript basics.


The container is only accessible once the form is rendered, so all calls to the containers must be inside fd.rendered event:

    //hide the container
    //show the container

Get HTML element

Access HTML element inside the container.

//access container's HTML
var htmlcontainer = fd.container('Container1').$el;

Hide/show container

Hide a container from a user.

//hide container

//show container


The property holds tabs of the container as an array of objects. Can be used to get tabs and their properties.


Disable tab

Disable or enable a tab:

//disable the second tab
fd.container('Container1').tabs[1].disabled = true;

//enable the second tab
fd.container('Container1').tabs[1].disabled = true;

The disabled tab can also be hidden with CSS:

.tabset .disabled{
    display: none; /* hide disabled tabs */

Current tab

Get the index of the currently opened tab:

//returns integer

Next/Previous tab

Open the next or previous tab:

//open next tab

//open previous tab

Open tab

Open a tab by index:

//open the first tab

//oepn the last tab
    fd.container('Container1').tabs.length -1

Tabs orientation

Get or set tabs position:

//returns the current tabs position

//set tabs position
fd.container('Container1').orientation = 'left';