Tabs can be created with one or more `<tc:tab/>` within a `<tc:tabGroup>`. Within a tab, content can be added like in a section or a panel.

Changing tabs is client side by default. To change them server side, the `switchType` attribute must have the value "reloadPage". All tab groups on this page are server side.

Tag Library Documentation: | |

A simple tab group. The second tab is disabled.

First tab. Second tab. Third tab.

This example show the different headers if the `label` or the `image` is used.

Only a label is set.

<tc:tab label="Only label"/>

A label and an image are set.

<tc:tab label="Label with image" image="\#{request.contextPath}/image/feather-leaf.png">

Only an image is set.

<tc:tab image="\#{request.contextPath}/image/feather-leaf.png">

Neither a label or an image are set. In this case the header gets a label with the indexnumber of the tab in the tab group.

The image in the header depends on what tab is currently selected.

<tc:tabGroup selectedIndex="\#{tabController.index}">

First folder open.

Second folder open.

Third folder open.

The `<tc:tabChangeListener/>` tag is used to bind a `TabChangeListener`. The `TabChangeListener` is an interface, which is implemented in this example by `SimpleTabChangeListener`.

`<tc:tabChangeListener type="org.apache.myfaces.tobago.example .demo.actionlistener.SimpleTabChangeListener" binding="\#{tabController.tabChangeListener}"/>`

Changed to tab one.

Changed to tab two.

Changed to tab three.