Tab Bar

<tpg-tab-bar></tpg-tab-bar>

The Tab Bar is used for switching between a guided workflow or different information “modules”.

A minimum of 2 items is required to assemble a Tab Bar, while a maximum of 3 items per single line is recommended (but up to 5 are allowed, and 5+ for desktop).

Truncation must be enabled when the number of Tab Items exceeds the available with of the Tab Bar / parent container. The Quaternary Menu Button will appear and group the overflown Tab Items. The tab items are shown in a Menu upon clicking on the Quaternary Menu Button. If one of the overflown Tab Items from the menu are selected, the active selection will be shown with a “+” badge visible on the Quaternary Menu Button.

Component behavior

The tab item (child of tab-bar) will respond to clicks or presses inside the entirety of its area. The tab bars appearence can be customized by passing the noBackground property, and/or changing the alignment of the tab-items with the justifyContent property.

Examples

Basic usage

Basic usage with 2-6 tab items

Component

Vanilla JS

      <tpg-tab-bar selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 2" value="Tab 2"
          ></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 2" value="Tab 2"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 3" value="Tab 3"
          ></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 2" value="Tab 2"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 3" value="Tab 3"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 4" value="Tab 4"
          ></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 2" value="Tab 2"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 3" value="Tab 3"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 4" value="Tab 4"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 5" value="Tab 5"
          ></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 2" value="Tab 2"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 3" value="Tab 3"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 4" value="Tab 4"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 5" value="Tab 5"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 6" value="Tab 6"
          ></tpg-tab-item>
      </tpg-tab-bar>

      <script>
        document.addEventListener('DOMContentLoaded', () => {
            const tabs = document.querySelectorAll('tpg-tab-bar');
            for (const tab of tabs) {
                tab.addEventListener("tpg-change", (e) => {
                    e.target.selectedValue = e.value
                });
            }
        });
      </script>

React

      <tpg-tab-bar
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2"></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2"></tpg-tab-item>
        <tpg-tab-item label="Tab 3" value="Tab 3"></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2"></tpg-tab-item>
        <tpg-tab-item label="Tab 3" value="Tab 3"></tpg-tab-item>
        <tpg-tab-item label="Tab 4" value="Tab 4"></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2"></tpg-tab-item>
        <tpg-tab-item label="Tab 3" value="Tab 3"></tpg-tab-item>
        <tpg-tab-item label="Tab 4" value="Tab 4"></tpg-tab-item>
        <tpg-tab-item label="Tab 5" value="Tab 5"></tpg-tab-item>
      </tpg-tab-bar>

      <tpg-tab-bar
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2"></tpg-tab-item>
        <tpg-tab-item label="Tab 3" value="Tab 3"></tpg-tab-item>
        <tpg-tab-item label="Tab 4" value="Tab 4"></tpg-tab-item>
        <tpg-tab-item label="Tab 5" value="Tab 5"></tpg-tab-item>
        <tpg-tab-item label="Tab 6" value="Tab 6"></tpg-tab-item>
      </tpg-tab-bar>

Justify content

Set the alignment of tab-items

Component

Vanilla JS

        <tpg-tab-bar justify-content="left" selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 2" value="Tab 2"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 3" value="Tab 3"
          ></tpg-tab-item>
        </tpg-tab-bar>
        <tpg-tab-bar justify-content="center" selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 2" value="Tab 2"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 3" value="Tab 3"
          ></tpg-tab-item>
        </tpg-tab-bar>
        <tpg-tab-bar justify-content="stretch" selected-value="Tab 1">
          <tpg-tab-item label="Tab 1" value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 2" value="Tab 2"
          ></tpg-tab-item>
          <tpg-tab-item label="Tab 3" value="Tab 3"
          ></tpg-tab-item>
        </tpg-tab-bar>

      <script>
        document.addEventListener('DOMContentLoaded', () => {
            const tabs = document.querySelectorAll('tpg-tab-bar');
            for (const tab of tabs) {
                tab.addEventListener("tpg-change", (e) => {
                    e.target.selectedValue = e.value
                });
            }
        });
      </script>

React

      <tpg-tab-bar
        justifyContent="left"
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2"></tpg-tab-item>
        <tpg-tab-item label="Tab 3" value="Tab 3"></tpg-tab-item>
      </tpg-tab-bar>
      <tpg-tab-bar
        justifyContent="center"
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2"></tpg-tab-item>
        <tpg-tab-item label="Tab 3" value="Tab 3"></tpg-tab-item>
      </tpg-tab-bar>
      <tpg-tab-bar
        justifyContent="stretch"
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2"></tpg-tab-item>
        <tpg-tab-item label="Tab 3" value="Tab 3"></tpg-tab-item>
      </tpg-tab-bar>

Tab Items with leading icon and trailing icon

Component

Vanilla JS

          <tpg-tab-bar selected-value="Tab 1">
              <tpg-tab-item
                  class="has-leading-placeholder-icon"
                  label="Tab 1"
                  value="Tab 1"
              ></tpg-tab-item>
              <tpg-tab-item
                  class="has-leading-placeholder-icon"
                  label="Tab 2" value="Tab 2"
              ></tpg-tab-item>
              <tpg-tab-item
                  class="has-leading-placeholder-icon"
                  label="Tab 3"
                  value="Tab 3"
              ></tpg-tab-item>
          </tpg-tab-bar>
          <tpg-tab-bar selected-value="Tab 1">
              <tpg-tab-item
                  class="has-trailing-placeholder-icon"
                  label="Tab 1"
                  value="Tab 1"
              ></tpg-tab-item>
              <tpg-tab-item
                  class="has-trailing-placeholder-icon"
                  label="Tab 2"
                  value="Tab 2"
              ></tpg-tab-item>
              <tpg-tab-item
                  class="has-trailing-placeholder-icon"
                  label="Tab 3"
                  value="Tab 3"
              ></tpg-tab-item>
          </tpg-tab-bar>

          <script>
              document.addEventListener('DOMContentLoaded', () => {
                  const tabs = document.querySelectorAll('tpg-tab-bar');
                  for (const tab of tabs) {
                      tab.addEventListener("tpg-change", (e) => {
                          e.target.selectedValue = e.value
                      });
                  }

                  const trailingItems = document.querySelectorAll('tpg-tab-item.has-trailing-placeholder-icon');
                  for (const item of trailingItems) {
                      item.trailingIconTemplate = tpgIconPlaceholderCustom;
                  }

                  const leadingItems = document.querySelectorAll('tpg-tab-item.has-leading-placeholder-icon');
                  for (const item of leadingItems) {
                      item.leadingIconTemplate = tpgIconPlaceholderCustom;
                  }
              });
          </script>

React

      import {
        tpgIconPlaceholderCustom,
      } from "@tpg/grammar-web-icons";

      ...

      <tpg-tab-bar selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item
          leadingIconTemplate={tpgIconPlaceholderCustom}
          label="Tab 1"
          value="Tab 1"
        ></tpg-tab-item>
        <tpg-tab-item
          leadingIconTemplate={tpgIconPlaceholderCustom}
          label="Tab 2"
          value="Tab 2"
        ></tpg-tab-item>
        <tpg-tab-item
          leadingIconTemplate={tpgIconPlaceholderCustom}
          label="Tab 3"
          value="Tab 3"
        ></tpg-tab-item>
      </tpg-tab-bar>
      <tpg-tab-bar selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item
          trailingIconTemplate={tpgIconPlaceholderCustom}
          label="Tab 1"
          value="Tab 1"
        ></tpg-tab-item>
        <tpg-tab-item
          trailingIconTemplate={tpgIconPlaceholderCustom}
          label="Tab 2"
          value="Tab 2"
        ></tpg-tab-item>
        <tpg-tab-item
          trailingIconTemplate={tpgIconPlaceholderCustom}
          label="Tab 3"
          value="Tab 3"
        ></tpg-tab-item>
      </tpg-tab-bar>

Tab Items with badge

Each tab item has a slot for a badge. The badge can be customized with the label and size properties.

Component

Vanilla JS

          <tpg-tab-bar justify-content="stretch" selected-value="Tab 1">
              <tpg-tab-item label="Tab 1" value="Tab 1">
                  <tpg-badge slot="badge" label="This" size="xxs"></tpg-badge>
              </tpg-tab-item>
              <tpg-tab-item label="Tab 2" value="Tab 2">
                  <tpg-badge slot="badge" label="is" size="xxs"></tpg-badge>
              </tpg-tab-item>
              <tpg-tab-item label="Tab 3" value="Tab 3">
                  <tpg-badge slot="badge" label="a" size="xxs"></tpg-badge>
              </tpg-tab-item>
              <tpg-tab-item label="Tab 4" value="Tab 4">
                  <tpg-badge slot="badge" label="badge" size="xxs"></tpg-badge>
              </tpg-tab-item>
          </tpg-tab-bar>

          <script>
              document.addEventListener('DOMContentLoaded', () => {
                  const tabs = document.querySelectorAll('tpg-tab-bar');
                  for (const tab of tabs) {
                      tab.addEventListener("tpg-change", (e) => {
                          e.target.selectedValue = e.value
                      });
                  }
              });
          </script>

React

      <tpg-tab-bar
        justifyContent="stretch"
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item label="Tab 1" value="Tab 1">
          <tpg-badge slot="badge" label="This" size="xxs"></tpg-badge>
        </tpg-tab-item>
        <tpg-tab-item label="Tab 2" value="Tab 2">
          <tpg-badge slot="badge" label="is" size="xxs"></tpg-badge>
        </tpg-tab-item>
        <tpg-tab-item label="Tab 3" value="Tab 3">
          <tpg-badge slot="badge" label="a" size="xxs"></tpg-badge>
        </tpg-tab-item>
        <tpg-tab-item label="Tab 4" value="Tab 4">
          <tpg-badge slot="badge" label="badge" size="xxs"></tpg-badge>
        </tpg-tab-item>
      </tpg-tab-bar>

Tab Items with disabled state

Component

Vanilla JS

        <tpg-tab-bar justify-content="stretch" selected-value="Tab 1">
          <tpg-tab-item
              disabled
              label="Tab 1"
              value="Tab 1"
          ></tpg-tab-item>
          <tpg-tab-item
              disabled
              class="has-leading-placeholder-icon"
              label="Tab 2"
              value="Tab 2"
          ></tpg-tab-item>
          <tpg-tab-item
              disabled
              class="has-trailing-placeholder-icon"
              label="Tab 3"
              value="Tab 3"
          ></tpg-tab-item>
          <tpg-tab-item disabled label="Tab 4" value="Tab 4">
              <tpg-badge slot="badge" label="badge" size="xxs"></tpg-badge>
          </tpg-tab-item>
        </tpg-tab-bar>


      <script>
          document.addEventListener('DOMContentLoaded', () => {
              const tabs = document.querySelectorAll('tpg-tab-bar');
              for (const tab of tabs) {
                  tab.addEventListener("tpg-change", (e) => {
                      e.target.selectedValue = e.value
                  });
              }

              const trailingItems = document.querySelectorAll('tpg-tab-item.has-trailing-placeholder-icon');
              for (const item of trailingItems) {
                  item.trailingIconTemplate = tpgIconPlaceholderCustom;
              }

              const leadingItems = document.querySelectorAll('tpg-tab-item.has-leading-placeholder-icon');
              for (const item of leadingItems) {
                  item.leadingIconTemplate = tpgIconPlaceholderCustom;
              }
          });
      </script>

React

      import {
        tpgIconPlaceholderCustom,
      } from "@tpg/grammar-web-icons";

      ...

      <tpg-tab-bar
        justifyContent="stretch"
        selectedValue="Tab 1"
        ontpg-change={(e) => ((e.target as TabBar).selectedValue = e.value!)}
      >
        <tpg-tab-item disabled label="Tab 1" value="Tab 1"></tpg-tab-item>
        <tpg-tab-item
          disabled
          leadingIconTemplate={tpgIconPlaceholderCustom}
          label="Tab 2"
          value="Tab 2"
        ></tpg-tab-item>
        <tpg-tab-item
          disabled
          trailingIconTemplate={tpgIconPlaceholderCustom}
          label="Tab 3"
          value="Tab 3"
        ></tpg-tab-item>
        <tpg-tab-item disabled label="Tab 4" value="Tab 4">
          <tpg-badge slot="badge" label="badge" size="xxs"></tpg-badge>
        </tpg-tab-item>
      </tpg-tab-bar>

Tables

Properties

Attribute	Property	Description	Type	Default Value
justify-content	justifyContent	Controls how the tab items are justified. Can be 'left', 'center', or 'stretch'.	'left' | 'center' | 'stretch'	'left'
selected-value	selectedValue	The currently selected tab's value. Reflected to the DOM attribute for styling.	string	''

Events

Event name	Reactjs attribute	Description
tpg-change	ontpg-change	Emitted when a tab item is selected.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
	Reserved for tab-items.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox