Components

Tab Group

<wa-tab-group>

Since 2.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 panel should have a name that's unique within the tab group, and tabs should have a panel attribute that points to the respective panel's 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.

<wa-tab-group>
  <wa-tab panel="general">General</wa-tab>
  <wa-tab panel="custom">Custom</wa-tab>
  <wa-tab panel="advanced">Advanced</wa-tab>
  <wa-tab panel="disabled" disabled>Disabled</wa-tab>

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

Examples Jump to heading

Setting the Active Tab Jump to heading

To make a tab active, set the active attribute to the name of the appropriate panel.

General

Custom

Advanced

This is the general tab panel.

This is the custom tab panel.

This is the advanced tab panel.

<wa-tab-group active="advanced">
  <wa-tab panel="general">General</wa-tab>
  <wa-tab panel="custom">Custom</wa-tab>
  <wa-tab panel="advanced">Advanced</wa-tab>

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

Tabs on Bottom Jump to heading

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.

<wa-tab-group placement="bottom">
  <wa-tab panel="general">General</wa-tab>
  <wa-tab panel="custom">Custom</wa-tab>
  <wa-tab panel="advanced">Advanced</wa-tab>
  <wa-tab panel="disabled" disabled>Disabled</wa-tab>

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

Tabs on Start Jump to heading

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.

<wa-tab-group placement="start">
  <wa-tab panel="general">General</wa-tab>
  <wa-tab panel="custom">Custom</wa-tab>
  <wa-tab panel="advanced">Advanced</wa-tab>
  <wa-tab panel="disabled" disabled>Disabled</wa-tab>

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

Tabs on End Jump to heading

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.

<wa-tab-group placement="end">
  <wa-tab panel="general">General</wa-tab>
  <wa-tab panel="custom">Custom</wa-tab>
  <wa-tab panel="advanced">Advanced</wa-tab>
  <wa-tab panel="disabled" disabled>Disabled</wa-tab>

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

You can make a tab closable by adding a close button next to the tab and inside the nav slot. You can position the button to your liking with CSS and handle close/restore behaviors by removing/appending the tab as desired. Note the use of tabindex="-1", which prevents the close button from interfering with the tab order. The close button is still recognizable to the virtual cursor in screen readers.

General

Closable

Advanced

This is the general tab panel.

This is the closable tab panel.

This is the advanced tab panel.

Restore tab

<wa-tab-group class="tabs-closable">
  <wa-tab panel="general">General</wa-tab>
  <wa-tab panel="closable">Closable</wa-tab>
  <wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
  <wa-tab panel="closable-2">Advanced</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="closable">This is the closable tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
</wa-tab-group>

<br>

<wa-button disabled>Restore tab</wa-button>

<style>
  .tabs-closable wa-icon-button {
    position: relative;
    left: -1rem;
    top: .75rem;  }
</style>

<script>
  const tabGroup = document.querySelector('.tabs-closable');
  const generalTab = tabGroup.querySelectorAll('wa-tab')[0];
  const closableTab = tabGroup.querySelectorAll('wa-tab')[1];
  const closeButton = tabGroup.querySelector('wa-icon-button');
  const restoreButton = tabGroup.nextElementSibling.nextElementSibling;

  // Remove the tab when the close button is clicked
  closeButton.addEventListener('click', () => {
    closableTab.remove();
    closeButton.remove();
    restoreButton.disabled = false;
  });

  // Restore the tab
  restoreButton.addEventListener('click', () => {
    restoreButton.disabled = true;
    generalTab.insertAdjacentElement('afterend', closeButton);
    generalTab.insertAdjacentElement('afterend', closableTab);
  })
</script>

Scrolling Tabs Jump to heading

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

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

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

Manual Activation Jump to heading

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.

<wa-tab-group activation="manual">
  <wa-tab panel="general">General</wa-tab>
  <wa-tab panel="custom">Custom</wa-tab>
  <wa-tab panel="advanced">Advanced</wa-tab>
  <wa-tab panel="disabled" disabled>Disabled</wa-tab>

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

Slots Jump to heading

Learn more about using slots.

Name	Description
(default)	Used for grouping tab panels in the tab group. Must be `<wa-tab-panel>` elements.
`nav`	Used for grouping tabs in the tab group. Must be `<wa-tab>` elements. Note that `<wa-tab>` will set this slot on itself automatically.

Attributes & Properties Jump to heading

Learn more about attributes and properties.

Name	Description	Reflects
`active` `active`	Sets the active tab. Type `string` Default `''`
`placement` `placement`	The placement of the tabs. Type `'top' \| 'bottom' \| 'start' \| 'end'` Default `'top'`
`activation` `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. Type `'auto' \| 'manual'` Default `'auto'`
`noScrollControls` `no-scroll-controls`	Disables the scroll arrows that appear when tabs overflow. Type `boolean` Default `false`

Events Jump to heading

Learn more about events.

Name	Description
`wa-tab-show`	Emitted when a tab is shown.
`wa-tab-hide`	Emitted when a tab is hidden.

CSS custom properties Jump to heading

Learn more about CSS custom properties.

Name	Description
`--indicator-color`	The color of the active tab indicator.
`--track-color`	The color of the indicator's track (the line that separates tabs from panels).
`--track-width`	The width of the indicator's track (the line that separates tabs from panels).

CSS parts Jump to heading

Learn more about CSS parts.

Name	Description
`base`	The component's base wrapper.
`nav`	The tab group's navigation container where tabs are slotted in.
`tabs`	The container that wraps the tabs.
`body`	The tab group's body where tab panels are slotted in.
`scroll-button`	The previous/next scroll buttons that show when tabs are scrollable, an `<wa-icon-button>`.
`scroll-button-start`	The starting scroll button.
`scroll-button-end`	The ending scroll button.
`scroll-button__base`	The scroll button's exported `base` part.

Dependencies Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Importing Jump to heading

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/components/tab-group/tab-group.js';

Coming soon!

Getting Started

Resources

Themes

Components

Native Styles

Style Utilities

Layout

Color Palettes

Design Tokens

Tab Group

Examples Jump to heading

Setting the Active Tab Jump to heading

Tabs on Bottom Jump to heading

Tabs on Start Jump to heading

Tabs on End Jump to heading

Closable Tabs Jump to heading

Scrolling Tabs Jump to heading

Manual Activation Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Importing Jump to heading

Getting Started

Resources

Tab Group

Examples Jump to heading #

Setting the Active Tab Jump to heading #

Tabs on Bottom Jump to heading #

Tabs on Start Jump to heading #

Tabs on End Jump to heading #

Closable Tabs Jump to heading #

Scrolling Tabs Jump to heading #

Manual Activation Jump to heading #

Slots Jump to heading #

Attributes & Properties Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Dependencies Jump to heading #

Importing Jump to heading #

Examples Jump to heading

Setting the Active Tab Jump to heading

Tabs on Bottom Jump to heading

Tabs on Start Jump to heading

Tabs on End Jump to heading

Closable Tabs Jump to heading

Scrolling Tabs Jump to heading

Manual Activation Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Importing Jump to heading