Default Gray Amethyst

Tab Group

<mo-tab-group> | MOTabGroup
Since 1.0 stable

Tab groups organize content into a container that shows one section at a time.

Tab groups make use of tabs and tab panels. Each tab must be slotted into the nav slot and its panel must refer to a tab panel of the same name.

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel. 
<mo-tab-group>
  <mo-tab slot="nav" panel="general">General</mo-tab>
  <mo-tab slot="nav" panel="custom">Custom</mo-tab>
  <mo-tab slot="nav" panel="advanced">Advanced</mo-tab>
  <mo-tab slot="nav" panel="disabled" disabled>Disabled</mo-tab>

  <mo-tab-panel name="general">This is the general tab panel.</mo-tab-panel>
  <mo-tab-panel name="custom">This is the custom tab panel.</mo-tab-panel>
  <mo-tab-panel name="advanced">This is the advanced tab panel.</mo-tab-panel>
  <mo-tab-panel name="disabled">This is a disabled tab panel.</mo-tab-panel>
</mo-tab-group>

import { MOTab, MOTabGroup, MOTabPanel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTabGroup>
    <MOTab slot="nav" panel="general">
      General
    </MOTab>
    <MOTab slot="nav" panel="custom">
      Custom
    </MOTab>
    <MOTab slot="nav" panel="advanced">
      Advanced
    </MOTab>
    <MOTab slot="nav" panel="disabled" disabled>
      Disabled
    </MOTab>

    <MOTabPanel name="general">This is the general tab panel.</MOTabPanel>
    <MOTabPanel name="custom">This is the custom tab panel.</MOTabPanel>
    <MOTabPanel name="advanced">This is the advanced tab panel.</MOTabPanel>
    <MOTabPanel name="disabled">This is a disabled tab panel.</MOTabPanel>
  </MOTabGroup>
);

Examples

Tabs on bottom

Tabs can be shown on the bottom by setting placement to bottom.

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel. 
<mo-tab-group placement="bottom">
  <mo-tab slot="nav" panel="general">General</mo-tab>
  <mo-tab slot="nav" panel="custom">Custom</mo-tab>
  <mo-tab slot="nav" panel="advanced">Advanced</mo-tab>
  <mo-tab slot="nav" panel="disabled" disabled>Disabled</mo-tab>

  <mo-tab-panel name="general">This is the general tab panel.</mo-tab-panel>
  <mo-tab-panel name="custom">This is the custom tab panel.</mo-tab-panel>
  <mo-tab-panel name="advanced">This is the advanced tab panel.</mo-tab-panel>
  <mo-tab-panel name="disabled">This is a disabled tab panel.</mo-tab-panel>
</mo-tab-group>

import { MOTab, MOTabGroup, MOTabPanel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTabGroup placement="bottom">
    <MOTab slot="nav" panel="general">
      General
    </MOTab>
    <MOTab slot="nav" panel="custom">
      Custom
    </MOTab>
    <MOTab slot="nav" panel="advanced">
      Advanced
    </MOTab>
    <MOTab slot="nav" panel="disabled" disabled>
      Disabled
    </MOTab>

    <MOTabPanel name="general">This is the general tab panel.</MOTabPanel>
    <MOTabPanel name="custom">This is the custom tab panel.</MOTabPanel>
    <MOTabPanel name="advanced">This is the advanced tab panel.</MOTabPanel>
    <MOTabPanel name="disabled">This is a disabled tab panel.</MOTabPanel>
  </MOTabGroup>
);

Tabs on start

Tabs can be shown on the starting side by setting placement to start.

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel. 
<mo-tab-group placement="start">
  <mo-tab slot="nav" panel="general">General</mo-tab>
  <mo-tab slot="nav" panel="custom">Custom</mo-tab>
  <mo-tab slot="nav" panel="advanced">Advanced</mo-tab>
  <mo-tab slot="nav" panel="disabled" disabled>Disabled</mo-tab>

  <mo-tab-panel name="general">This is the general tab panel.</mo-tab-panel>
  <mo-tab-panel name="custom">This is the custom tab panel.</mo-tab-panel>
  <mo-tab-panel name="advanced">This is the advanced tab panel.</mo-tab-panel>
  <mo-tab-panel name="disabled">This is a disabled tab panel.</mo-tab-panel>
</mo-tab-group>

import { MOTab, MOTabGroup, MOTabPanel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTabGroup placement="start">
    <MOTab slot="nav" panel="general">
      General
    </MOTab>
    <MOTab slot="nav" panel="custom">
      Custom
    </MOTab>
    <MOTab slot="nav" panel="advanced">
      Advanced
    </MOTab>
    <MOTab slot="nav" panel="disabled" disabled>
      Disabled
    </MOTab>

    <MOTabPanel name="general">This is the general tab panel.</MOTabPanel>
    <MOTabPanel name="custom">This is the custom tab panel.</MOTabPanel>
    <MOTabPanel name="advanced">This is the advanced tab panel.</MOTabPanel>
    <MOTabPanel name="disabled">This is a disabled tab panel.</MOTabPanel>
  </MOTabGroup>
);

Tabs on end

Tabs can be shown on the ending side by setting placement to end.

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel. 
<mo-tab-group placement="end">
  <mo-tab slot="nav" panel="general">General</mo-tab>
  <mo-tab slot="nav" panel="custom">Custom</mo-tab>
  <mo-tab slot="nav" panel="advanced">Advanced</mo-tab>
  <mo-tab slot="nav" panel="disabled" disabled>Disabled</mo-tab>

  <mo-tab-panel name="general">This is the general tab panel.</mo-tab-panel>
  <mo-tab-panel name="custom">This is the custom tab panel.</mo-tab-panel>
  <mo-tab-panel name="advanced">This is the advanced tab panel.</mo-tab-panel>
  <mo-tab-panel name="disabled">This is a disabled tab panel.</mo-tab-panel>
</mo-tab-group>

import { MOTab, MOTabGroup, MOTabPanel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTabGroup placement="end">
    <MOTab slot="nav" panel="general">
      General
    </MOTab>
    <MOTab slot="nav" panel="custom">
      Custom
    </MOTab>
    <MOTab slot="nav" panel="advanced">
      Advanced
    </MOTab>
    <MOTab slot="nav" panel="disabled" disabled>
      Disabled
    </MOTab>

    <MOTabPanel name="general">This is the general tab panel.</MOTabPanel>
    <MOTabPanel name="custom">This is the custom tab panel.</MOTabPanel>
    <MOTabPanel name="advanced">This is the advanced tab panel.</MOTabPanel>
    <MOTabPanel name="disabled">This is a disabled tab panel.</MOTabPanel>
  </MOTabGroup>
);

Closable tabs

Add the closable attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.

General Closable 1 Closable 2 Closable 3 This is the general tab panel. This is the first closable tab panel. This is the second closable tab panel. This is the third closable tab panel. 
<mo-tab-group class="tabs-closable">
  <mo-tab slot="nav" panel="general">General</mo-tab>
  <mo-tab slot="nav" panel="closable-1" closable>Closable 1</mo-tab>
  <mo-tab slot="nav" panel="closable-2" closable>Closable 2</mo-tab>
  <mo-tab slot="nav" panel="closable-3" closable>Closable 3</mo-tab>

  <mo-tab-panel name="general">This is the general tab panel.</mo-tab-panel>
  <mo-tab-panel name="closable-1">This is the first closable tab panel.</mo-tab-panel>
  <mo-tab-panel name="closable-2">This is the second closable tab panel.</mo-tab-panel>
  <mo-tab-panel name="closable-3">This is the third closable tab panel.</mo-tab-panel>
</mo-tab-group>

<script>
  const tabGroup = document.querySelector('.tabs-closable');

  tabGroup.addEventListener('mo-close', async event => {
    const tab = event.target;
    const panel = tabGroup.querySelector(`mo-tab-panel[name="${tab.panel}"]`);

    // Show the previous tab if the tab is currently active
    if (tab.active) {
      tabGroup.show(tab.previousElementSibling.panel);
    }

    // Remove the tab + panel
    tab.remove();
    panel.remove();
  });
</script>

import { MOTab, MOTabGroup, MOTabPanel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => {
  function handleClose(event) {
    //
    // This is a crude example that removes the tab and its panel from the DOM.
    // There are better ways to manage tab creation/removal in React, but that
    // would significantly complicate the example.
    //
    const tab = event.target;
    const tabGroup = tab.closest('mo-tab-group');
    const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);

    tab.remove();
    tabPanel.remove();
  }

  return (
    <MOTabGroup className="tabs-closable" onMoClose={handleClose}>
      <MOTab slot="nav" panel="general">
        General
      </MOTab>
      <MOTab slot="nav" panel="closable-1" closable onMoClose={handleClose}>
        Closable 1
      </MOTab>
      <MOTab slot="nav" panel="closable-2" closable onMoClose={handleClose}>
        Closable 2
      </MOTab>
      <MOTab slot="nav" panel="closable-3" closable onMoClose={handleClose}>
        Closable 3
      </MOTab>

      <MOTabPanel name="general">This is the general tab panel.</MOTabPanel>
      <MOTabPanel name="closable-1">This is the first closable tab panel.</MOTabPanel>
      <MOTabPanel name="closable-2">This is the second closable tab panel.</MOTabPanel>
      <MOTabPanel name="closable-3">This is the third closable tab panel.</MOTabPanel>
    </MOTabGroup>
  );
};

Controlled tabs with menus

You can use the activeTab attribute on mo-tab-group to programmatically change the current active tab. This example also features tabs with menus. 

<div class="controlled-container">
  <mo-select id="controlled-tabs" style="align-self: flex-start;" label="Select tab" value="general">
    <mo-option value="general">General</mo-option>
    <mo-option value="custom">Custom</mo-option>
    <mo-option value="advanced">Advanced</mo-option>
  </mo-select>
  <mo-tab-group class="tabs-controlled">
    <mo-tab slot="nav" panel="general">
      <span>
        <p>General</p>
        <mo-dropdown hoist>
          <mo-icon-button slot="trigger" name="chevron-down"></mo-icon-button>
          <mo-menu>
            <mo-menu-item value="configure">
              <span>
                Configure
                <mo-icon name="settings"></mo-icon>
              </span>
            </mo-menu-item>
            <mo-menu-item value="delete">
              <span>
                Delete
                <mo-icon name="cross-circle"></mo-icon>
              </span>
            </mo-menu-item>
          </mo-menu>
        </mo-dropdown>
      </span>
    </mo-tab>
    <mo-tab slot="nav" panel="custom">
      <span>
        <p>Custom</p>
        <mo-dropdown hoist>
          <mo-icon-button slot="trigger" name="chevron-down"></mo-icon-button>
          <mo-menu>
            <mo-menu-item value="configure">
              <span>
                Configure
                <mo-icon name="settings"></mo-icon>
              </span>
            </mo-menu-item>
            <mo-menu-item value="delete">
              <span>
                Delete
                <mo-icon name="cross-circle"></mo-icon>
              </span>
            </mo-menu-item>
          </mo-menu>
        </mo-dropdown>
      </span>
    </mo-tab>
    <mo-tab slot="nav" panel="advanced">
      <span>
        <p>Advanced</p>
        <mo-dropdown hoist>
          <mo-icon-button slot="trigger" name="chevron-down"></mo-icon-button>
          <mo-menu>
            <mo-menu-item value="configure">
              <span>
                Configure
                <mo-icon name="settings"></mo-icon>
              </span>
            </mo-menu-item>
            <mo-menu-item value="delete">
              <span>
                Delete
                <mo-icon name="cross-circle"></mo-icon>
              </span>
            </mo-menu-item>
          </mo-menu>
        </mo-dropdown>
      </span>
    </mo-tab>
    <mo-tab class="plus" slot="nav">
      <mo-icon-button name="plus"></mo-icon-button>
    </mo-tab>

    <mo-tab-panel name="general">This is the general tab panel.</mo-tab-panel>
    <mo-tab-panel name="custom">This is the custom tab panel.</mo-tab-panel>
    <mo-tab-panel name="advanced">This is the advanced panel.</mo-tab-panel>
  </mo-tab-group>
  <mo-dialog label="Configure tab" id="tab-dialog">
    <form id="dialog-form">
      <mo-input name="name" id="name-input" label="Tab name"></mo-input>
      <mo-button type="submit" id="save-btn">Save changes</mo-button>
    </form>
  </mo-dialog>

  <mo-dialog label="Add new tab" id="tab-dialog-new">
    <form id="dialog-form-new">
      <mo-input name="name" id="name-input-new" label="New tab name"></mo-input>
      <mo-button type="submit" id="save-btn-new">Add new tab</mo-button>
    </form>
  </mo-dialog>
</div>

<script>
  const tabGroup = document.querySelector('.tabs-controlled');
  const select = document.querySelector('#controlled-tabs');
  const menus = tabGroup.querySelectorAll('mo-menu');
  const form = document.querySelector('#dialog-form');
  const dialog = document.querySelector('#tab-dialog');
  const nameInput = document.querySelector('#name-input');
  const nameInputNew = document.querySelector('#name-input-new');
  const saveBtn = document.querySelector('#save-btn');
  const addBtn = document.querySelector('.plus');
  let oldName = '';

  const dialogNew = document.querySelector('#tab-dialog-new');
  const formNew = document.querySelector('#dialog-form-new');

  tabGroup.addEventListener('mo-tab-show', e => {
    select.value = e.detail.name;
  });

  const handleMenuSelect = e => {
    const action = e.detail.item.value;
    const tab = e.target.closest('mo-tab');
    if (action === 'configure') {
      const p = tab.querySelector('p');
      nameInput.value = p.textContent.trim();
      oldName = p.textContent.trim();
      dialog.show();
    } else {
      const panel = tabGroup.querySelector(`mo-tab-panel[name="${tab.panel}"]`);
      if (tab.active && tab.previousElementSibling) {
        tabGroup.show(tab.previousElementSibling.panel);
      } else if (tab.active && tab.nextElementSibling) {
        tabGroup.show(tab.nextElementSibling.panel);
      }
      Array.from(select.querySelectorAll('mo-option'))
        .find(option => option.value === panel.name)
        .remove();
      tab.remove();
      panel.remove();
    }
  };

  saveBtn.addEventListener('click', () => {
    dialog.hide();
  });

  addBtn.addEventListener('click', e => {
    e.preventDefault();
    e.stopImmediatePropagation();
    nameInputNew.value = '';
    dialogNew.show();
  });

  form.addEventListener('submit', e => {
    e.preventDefault();
    const formData = new FormData(form);
    const tab = Array.from(tabGroup.querySelectorAll('mo-tab')).find(tab => tab.panel === oldName.toLowerCase());
    const panel = tabGroup.querySelector(`mo-tab-panel[name="${tab.panel}"]`);
    const editable = Array.from(tabGroup.querySelectorAll('p')).find(p => p.textContent === oldName);
    var object = {};
    formData.forEach((value, key) => (object[key] = value));
    editable.textContent = object.name;
    const newIdentifier = object.name.toLowerCase().replace(' ', '_');
    const option = Array.from(select.querySelectorAll('mo-option')).find(option => option.value === panel.name);
    tab.panel = newIdentifier;
    panel.name = newIdentifier;
    option.value = newIdentifier;
    option.textContent = object.name;
    select.value = newIdentifier;
    tabGroup.syncIndicator();
  });

  formNew.addEventListener('submit', e => {
    e.preventDefault();
    const formData = new FormData(formNew);
    var object = {};
    formData.forEach((value, key) => (object[key] = value));
    const newTab = document.createElement('mo-tab');
    const newPanel = document.createElement('mo-tab-panel');
    const newOption = document.createElement('mo-option');
    const newIdentifier = object.name.toLowerCase().replace(' ', '_');
    const text = object.name;
    newOption.value = newIdentifier;
    newOption.textContent = text;
    newPanel.name = newIdentifier;
    newPanel.textContent = `This is the ${text} tab panel.`;
    newTab.panel = newIdentifier;
    newTab.slot = 'nav';
    newTab.innerHTML = `
    <span>
        <p>${text}</p>
        <mo-dropdown hoist>
          <mo-icon-button slot="trigger" name="chevron-down"></mo-icon-button>
          <mo-menu>
            <mo-menu-item value="configure">
              <span>
                Configure
                <mo-icon name="settings"></mo-icon>
              </span>
            </mo-menu-item>
            <mo-menu-item value="delete">
              <span>
                Delete
                <mo-icon name="cross-circle"></mo-icon>
              </span>
            </mo-menu-item>
          </mo-menu>
        </mo-dropdown>
      </span>
    `;
    tabGroup.insertBefore(newTab, addBtn);
    newTab.querySelector('mo-menu').addEventListener('mo-select', e => {
      handleMenuSelect(e);
    });
    select.appendChild(newOption);
    tabGroup.appendChild(newPanel);
    tabGroup.syncIndicator();
    dialogNew.hide();
  });

  menus.forEach(menu => {
    menu.addEventListener('mo-select', e => {
      handleMenuSelect(e);
    });
  });

  select.addEventListener('mo-change', () => {
    tabGroup.activeTab = select.value;
  });
</script>
<style>
  .controlled-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .tabs-controlled span {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .tabs-controlled p {
    margin: 0;
  }

  .tabs-controlled mo-icon {
    margin-left: var(--mo-spacing-small);
  }

  .tabs-controlled mo-tab::part(base) {
    padding-right: var(--mo-spacing-2x-small);
  }

  mo-tab.plus::part(base) {
    padding: 0;
  }

  mo-dropdown::part(trigger) {
    display: flex;
  }
</style>

import { MOTab, MOTabGroup, MOTabPanel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => {
  function handleClose(event) {
    //
    // This is a crude example that removes the tab and its panel from the DOM.
    // There are better ways to manage tab creation/removal in React, but that
    // would significantly complicate the example.
    //
    const tab = event.target;
    const tabGroup = tab.closest('mo-tab-group');
    const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);

    tab.remove();
    tabPanel.remove();
  }

  return (
    <MOTabGroup className="tabs-closable" onMoClose={handleClose}>
      <MOTab slot="nav" panel="general">
        General
      </MOTab>
      <MOTab slot="nav" panel="closable-1" closable onMoClose={handleClose}>
        Closable 1
      </MOTab>
      <MOTab slot="nav" panel="closable-2" closable onMoClose={handleClose}>
        Closable 2
      </MOTab>
      <MOTab slot="nav" panel="closable-3" closable onMoClose={handleClose}>
        Closable 3
      </MOTab>

      <MOTabPanel name="general">This is the general tab panel.</MOTabPanel>
      <MOTabPanel name="closable-1">This is the first closable tab panel.</MOTabPanel>
      <MOTabPanel name="closable-2">This is the second closable tab panel.</MOTabPanel>
      <MOTabPanel name="closable-3">This is the third closable tab panel.</MOTabPanel>
    </MOTabGroup>
  );
};

Scrolling tabs

When there are more tabs than horizontal space allows, the nav will be scrollable.

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5 Tab 6 Tab 7 Tab 8 Tab 9 Tab 10 Tab 11 Tab 12 Tab 13 Tab 14 Tab 15 Tab 16 Tab 17 Tab 18 Tab 19 Tab 20 Tab panel 1 Tab panel 2 Tab panel 3 Tab panel 4 Tab panel 5 Tab panel 6 Tab panel 7 Tab panel 8 Tab panel 9 Tab panel 10 Tab panel 11 Tab panel 12 Tab panel 13 Tab panel 14 Tab panel 15 Tab panel 16 Tab panel 17 Tab panel 18 Tab panel 19 Tab panel 20 
<mo-tab-group>
  <mo-tab slot="nav" panel="tab-1">Tab 1</mo-tab>
  <mo-tab slot="nav" panel="tab-2">Tab 2</mo-tab>
  <mo-tab slot="nav" panel="tab-3">Tab 3</mo-tab>
  <mo-tab slot="nav" panel="tab-4">Tab 4</mo-tab>
  <mo-tab slot="nav" panel="tab-5">Tab 5</mo-tab>
  <mo-tab slot="nav" panel="tab-6">Tab 6</mo-tab>
  <mo-tab slot="nav" panel="tab-7">Tab 7</mo-tab>
  <mo-tab slot="nav" panel="tab-8">Tab 8</mo-tab>
  <mo-tab slot="nav" panel="tab-9">Tab 9</mo-tab>
  <mo-tab slot="nav" panel="tab-10">Tab 10</mo-tab>
  <mo-tab slot="nav" panel="tab-11">Tab 11</mo-tab>
  <mo-tab slot="nav" panel="tab-12">Tab 12</mo-tab>
  <mo-tab slot="nav" panel="tab-13">Tab 13</mo-tab>
  <mo-tab slot="nav" panel="tab-14">Tab 14</mo-tab>
  <mo-tab slot="nav" panel="tab-15">Tab 15</mo-tab>
  <mo-tab slot="nav" panel="tab-16">Tab 16</mo-tab>
  <mo-tab slot="nav" panel="tab-17">Tab 17</mo-tab>
  <mo-tab slot="nav" panel="tab-18">Tab 18</mo-tab>
  <mo-tab slot="nav" panel="tab-19">Tab 19</mo-tab>
  <mo-tab slot="nav" panel="tab-20">Tab 20</mo-tab>

  <mo-tab-panel name="tab-1">Tab panel 1</mo-tab-panel>
  <mo-tab-panel name="tab-2">Tab panel 2</mo-tab-panel>
  <mo-tab-panel name="tab-3">Tab panel 3</mo-tab-panel>
  <mo-tab-panel name="tab-4">Tab panel 4</mo-tab-panel>
  <mo-tab-panel name="tab-5">Tab panel 5</mo-tab-panel>
  <mo-tab-panel name="tab-6">Tab panel 6</mo-tab-panel>
  <mo-tab-panel name="tab-7">Tab panel 7</mo-tab-panel>
  <mo-tab-panel name="tab-8">Tab panel 8</mo-tab-panel>
  <mo-tab-panel name="tab-9">Tab panel 9</mo-tab-panel>
  <mo-tab-panel name="tab-10">Tab panel 10</mo-tab-panel>
  <mo-tab-panel name="tab-11">Tab panel 11</mo-tab-panel>
  <mo-tab-panel name="tab-12">Tab panel 12</mo-tab-panel>
  <mo-tab-panel name="tab-13">Tab panel 13</mo-tab-panel>
  <mo-tab-panel name="tab-14">Tab panel 14</mo-tab-panel>
  <mo-tab-panel name="tab-15">Tab panel 15</mo-tab-panel>
  <mo-tab-panel name="tab-16">Tab panel 16</mo-tab-panel>
  <mo-tab-panel name="tab-17">Tab panel 17</mo-tab-panel>
  <mo-tab-panel name="tab-18">Tab panel 18</mo-tab-panel>
  <mo-tab-panel name="tab-19">Tab panel 19</mo-tab-panel>
  <mo-tab-panel name="tab-20">Tab panel 20</mo-tab-panel>
</mo-tab-group>

import { MOTab, MOTabGroup, MOTabPanel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTabGroup>
    <MOTab slot="nav" panel="tab-1">
      Tab 1
    </MOTab>
    <MOTab slot="nav" panel="tab-2">
      Tab 2
    </MOTab>
    <MOTab slot="nav" panel="tab-3">
      Tab 3
    </MOTab>
    <MOTab slot="nav" panel="tab-4">
      Tab 4
    </MOTab>
    <MOTab slot="nav" panel="tab-5">
      Tab 5
    </MOTab>
    <MOTab slot="nav" panel="tab-6">
      Tab 6
    </MOTab>
    <MOTab slot="nav" panel="tab-7">
      Tab 7
    </MOTab>
    <MOTab slot="nav" panel="tab-8">
      Tab 8
    </MOTab>
    <MOTab slot="nav" panel="tab-9">
      Tab 9
    </MOTab>
    <MOTab slot="nav" panel="tab-10">
      Tab 10
    </MOTab>
    <MOTab slot="nav" panel="tab-11">
      Tab 11
    </MOTab>
    <MOTab slot="nav" panel="tab-12">
      Tab 12
    </MOTab>
    <MOTab slot="nav" panel="tab-13">
      Tab 13
    </MOTab>
    <MOTab slot="nav" panel="tab-14">
      Tab 14
    </MOTab>
    <MOTab slot="nav" panel="tab-15">
      Tab 15
    </MOTab>
    <MOTab slot="nav" panel="tab-16">
      Tab 16
    </MOTab>
    <MOTab slot="nav" panel="tab-17">
      Tab 17
    </MOTab>
    <MOTab slot="nav" panel="tab-18">
      Tab 18
    </MOTab>
    <MOTab slot="nav" panel="tab-19">
      Tab 19
    </MOTab>
    <MOTab slot="nav" panel="tab-20">
      Tab 20
    </MOTab>

    <MOTabPanel name="tab-1">Tab panel 1</MOTabPanel>
    <MOTabPanel name="tab-2">Tab panel 2</MOTabPanel>
    <MOTabPanel name="tab-3">Tab panel 3</MOTabPanel>
    <MOTabPanel name="tab-4">Tab panel 4</MOTabPanel>
    <MOTabPanel name="tab-5">Tab panel 5</MOTabPanel>
    <MOTabPanel name="tab-6">Tab panel 6</MOTabPanel>
    <MOTabPanel name="tab-7">Tab panel 7</MOTabPanel>
    <MOTabPanel name="tab-8">Tab panel 8</MOTabPanel>
    <MOTabPanel name="tab-9">Tab panel 9</MOTabPanel>
    <MOTabPanel name="tab-10">Tab panel 10</MOTabPanel>
    <MOTabPanel name="tab-11">Tab panel 11</MOTabPanel>
    <MOTabPanel name="tab-12">Tab panel 12</MOTabPanel>
    <MOTabPanel name="tab-13">Tab panel 13</MOTabPanel>
    <MOTabPanel name="tab-14">Tab panel 14</MOTabPanel>
    <MOTabPanel name="tab-15">Tab panel 15</MOTabPanel>
    <MOTabPanel name="tab-16">Tab panel 16</MOTabPanel>
    <MOTabPanel name="tab-17">Tab panel 17</MOTabPanel>
    <MOTabPanel name="tab-18">Tab panel 18</MOTabPanel>
    <MOTabPanel name="tab-19">Tab panel 19</MOTabPanel>
    <MOTabPanel name="tab-20">Tab panel 20</MOTabPanel>
  </MOTabGroup>
);

Manual activation

When focused, keyboard users can press Left or Right to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting activation="manual" which will require the user to press Space or Enter before showing the tab panel (manual activation).

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel. 
<mo-tab-group activation="manual">
  <mo-tab slot="nav" panel="general">General</mo-tab>
  <mo-tab slot="nav" panel="custom">Custom</mo-tab>
  <mo-tab slot="nav" panel="advanced">Advanced</mo-tab>
  <mo-tab slot="nav" panel="disabled" disabled>Disabled</mo-tab>

  <mo-tab-panel name="general">This is the general tab panel.</mo-tab-panel>
  <mo-tab-panel name="custom">This is the custom tab panel.</mo-tab-panel>
  <mo-tab-panel name="advanced">This is the advanced tab panel.</mo-tab-panel>
  <mo-tab-panel name="disabled">This is a disabled tab panel.</mo-tab-panel>
</mo-tab-group>

import { MOTab, MOTabGroup, MOTabPanel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTabGroup activation="manual">
    <MOTab slot="nav" panel="general">
      General
    </MOTab>
    <MOTab slot="nav" panel="custom">
      Custom
    </MOTab>
    <MOTab slot="nav" panel="advanced">
      Advanced
    </MOTab>
    <MOTab slot="nav" panel="disabled" disabled>
      Disabled
    </MOTab>

    <MOTabPanel name="general">This is the general tab panel.</MOTabPanel>
    <MOTabPanel name="custom">This is the custom tab panel.</MOTabPanel>
    <MOTabPanel name="advanced">This is the advanced tab panel.</MOTabPanel>
    <MOTabPanel name="disabled">This is a disabled tab panel.</MOTabPanel>
  </MOTabGroup>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/tab-group/tab-group.js';

To import this component as a React component:

import MOTabGroup from '@metsooutotec/modes-web-components/dist/react/tab-group/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/tab-group/tab-group.js"></script>

Slots

Name Description
(default) Used for grouping tab panels in the tab group.
nav Used for grouping tabs in the tab group.

Learn more about using slots.

Properties

Name Description Reflects Type Default
placement The placement of the tabs. 'top' | 'bottom' | 'start' | 'end' 'top'
activation When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to manual, the tab will receive focus but will not show until the user presses spacebar or enter. 'auto' | 'manual' 'auto'
noScrollControls
no-scroll-controls 		Disables the scroll arrows that appear when tabs overflow. boolean false
lang The locale to render the component in. string -
activeTab The name of the active tab. Use this to programmatically change the active tab. string -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-tab-show onMoTabShow Emitted when a tab is shown. { name: String }
mo-tab-hide onMoTabHide Emitted when a tab is hidden. { name: String }

Learn more about events.

Methods

Name Description Arguments
show() Shows the specified tab panel. panel: string

Learn more about methods.

Custom Properties

Name Description Default
--indicator-color The color of the active tab indicator.
--indicator-width The width of the indicator.
--track-color The color of the indicator’s track (i.e. the line that separates tabs from panels).
--track-width The width of the indicator’s track (i.e. the line that separates tabs from panels).

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s internal wrapper.
nav The tab group navigation container.
tabs The container that wraps the slotted tabs.
active-tab-indicator An element that displays the currently selected tab. This is a child of the tabs container.
body The tab group body where tab panels are slotted in.
scroll-button The previous and next scroll buttons that appear when tabs are scrollable.
scroll-button--start Targets the starting scroll button.
scroll-button--end Targets the ending scroll button.
scroll-button__base The scroll button’s base part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.