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.

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 is set.

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

A label and an image is set to an bootstrap icon.

<tc:tab label="Label with icon" icon="bi-gender-female">

Only an image is set.

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

Only an image is set to an bootstrap icon.

<tc:tab icon="bi-gender-male">

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

It's also possible to set the label via a label facet. So you can use e.g. converters.

If using this, don't forget to set `labelLayout="skip" plain="true"` to switch off the layout and boxes of the components.