Component library

Tab Items

Last updated 2 November 2026

Live demo

<ins-tab>
  <ins-tab-item 
    active 
    label="Tab 1" 
    icon="icon-image">

    <div>

      <p>Tab 1 with nested ins-tab example</p>
 
       <!-- Inner Tab Component -->

        <ins-tab>

          <ins-tab-item>

            <div>Inner 1</div>
 
         </ins-tab-item>

          <ins-tab-item active>

            <div>Inner 2</div>

          </ins-tab-item>

        </ins-tab>

        <!-- Inner Tab Component -->

    </div>

  </ins-tab-item>

  <ins-tab-item disabled icon="icon-image">

    <div>

      <p>Tab 2</p>

    </div>

  </ins-tab-item>

  <ins-tab-item label="Entries" icon="icon-entries">

    <div>

      <p>Tab 3</p>

    </div>

  </ins-tab-item>

  <ins-tab-item no-padding>

    <p>Tab 4 - no padding</p>

  </ins-tab-item>

  <ins-tab-item has-error>

    <p>Tab 5 - has error</p>

  </ins-tab-item>

</ins-tab>

Examples

Tab Items - v2 Content

Contains the tab content

Important: Wrap your tab-item content within a <div>

Tab Items - v2 Table

Properties

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
active	boolean	false	true, false	Set tab to 'active' state
label	string	Tab	any	Defines tab heading
icon	string	""	any	Defines the icon class to be used
no-padding	boolean	false	true, false	Removes tab item's left and right padding.
disabled	boolean	false	true, false	Disables a tab
has-error	boolean	false	true, false	Set a tab heading to show 'error indicator' (bottom red line)

Event

EVENT	OBJECT	DESCRIPTION
insTabError	boolean	Emits value when a tab 'has-error' property changes