# TabPanel (part of package '[Bootstrap Components](/reference/servoyextensions/packages/ui-component-packages/bootstrap-components.md)')\ Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\ Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md) The TabPanel component is a container that organizes multiple forms into a tabbed interface, only one form being visible (selected) at any point in time. This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components). ## Properties ### closeIconStyleClass The CSS style class applied to the close icon used in the TabPanel's tab headers. Only applicable if showTabCloseIcon is true. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) Default Value: "glyphicon glyphicon-remove close-icon" *** ### containerStyleClass The CSS style class(es) applied to the container element of the TabPanel. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) *** ### height Minimum height of the tabpanel, should be used for responsive forms. Can be 100% (to take parent container height) or a number (in pixels). Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "500" *** ### showTabCloseIcon Flag indicating whether the close icon is displayed on the tabs. Default value is false. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false *** ### styleClass Set the styleclass(es) that should be applied at to this component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) *** ### tabIndex The current 1-based index of the active(visible) tab from tabs array. Can also be set to change the active tab. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 1 *** ### tabSeq Tab sequence number of form containers is used for all nested components in the main form. Type: [Tabseq](/reference/servoy-developer/component_and_service_property_types.md#tabseq) *** ### tabs An array of tab objects contained within the TabPanel. Type: [Array\>](#tab) *** ### visible Whether the tabpanel is visible or not. Default is true (visible). Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible) *** ## Events ### onChangeMethodID(previousIndex,event,newIndex) Fired after a different tab is selected **Parameters:** > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} previousIndex The previous tab index before the change > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the tab change > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} newIndex The current tab index ( after the change ) *** ### onTabClickedMethodID(event,clickedTabIndex,dataTarget) Fired when the user clicks on a tab. When false is returned, the tab switch is prevented **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object that triggered the action > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} clickedTabIndex The index of the tab that was clicked > * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The identifier of the closest data-target attribute, if available **Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} *** ### onTabCloseMethodID(event,clickedTabIndex) Fired when the user clicks on the tab close icon. When false is returned, the tab close is prevented **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object that triggered the action > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} clickedTabIndex The index of the tab that was clicked **Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} *** ## API ### addTab(form,tabText,index) Adds a tab with the given form and tab text on the given index. **Parameters:** > * {[Form](/reference/servoy-developer/component_and_service_property_types.md#form)} form The name of the form to add as a tab > * {[Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)} tabText The tab text that should be displayed. Can contain tags (i18n keys or foundset data). > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} \[index] Give an index where the tab should be placed in the array of tabs, default at the end. **Returns:** [CustomType\](#tab) The newly created tab object that represents the added form in the tab panel. *** ### getTabAt(index) Retrieves the tab at the specified index from the tabs model. **Parameters:** > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index The 1-based index of the tab to retrieve. **Returns:** [CustomType\](#tab) The tab object at the specified index, or null if the index is out of range. *** ### removeAllTabs() Removes all tabs of this tabpanel **Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) True if all tabs were successfully removed; false otherwise. *** ### removeTabAt(index) Removes the tab from the given index (index is 1-based). **Parameters:** > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index The 1-based index of the tab to remove. **Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) True if the tab was successfully removed; false otherwise. *** ### selectTabAt(index) Selects the tab of the given index **@deprecated** use tabIndex property instead. **Parameters:** > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index *** ## Types ## tab Represents a tab in the tabpanel. scripting type: CustomType\ * containedForm * The form contained within the tab. * **Type**: [form](/reference/servoy-developer/component_and_service_property_types.md#form) * disabled * Flag indicating whether the tab is disabled. * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md) * **Default Value**: false * hideCloseIcon * When true, the close icon is hidden for this tab. * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md) * **Default Value**: false * iconStyleClass * CSS style class(es) that can define icon on the tab (like fontawesome icon). * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) * imageMediaID * The media identifier for the tab's icon. * **Type**: [media](/reference/servoy-developer/component_and_service_property_types.md#media) * name * The unique name identifier of the tab. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * relationName * The relation used for loading data into the form contained within the tab. Can be null if no relation is used. * **Type**: [relation](/reference/servoy-developer/component_and_service_property_types.md#relation) * styleClass * Additional CSS style classes applied to the tab. * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) * text * The text displayed on the tab. * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) * toolTipText * Tooltip text displayed when hovering over the tab. * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/tabpanel.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.