Tabset

<bolt-tabset>
  <bolt-tablabel>First tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for first tab
  </bolt-tabpanel>

  <bolt-tablabel>Second tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for second tab
  </bolt-tabpanel>

  <bolt-tablabel>Third tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for third tab
  </bolt-tabpanel>
</bolt-tabset>

A tabset with an activetab value greater than zero will display the content of the specified tab index on page load.

<bolt-tabset activetab="1">
  <bolt-tablabel>First tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for first tab
  </bolt-tabpanel>

  <bolt-tablabel>Second tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for second tab
  </bolt-tabpanel>

  <bolt-tablabel>Third tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for third tab
  </bolt-tabpanel>
</bolt-tabset>

If the list of tabs exceeds the available width of its container, the labels can be scrolled horizontally or accessed by using the provided left and right arrow buttons.

<bolt-tabset>
  <bolt-tablabel>First tab label</bolt-tablabel>
  <bolt-tabpanel>
    Content for first tab
  </bolt-tabpanel>

  <bolt-tablabel>Second tab label</bolt-tablabel>
  <bolt-tabpanel>
    Content for second tab
  </bolt-tabpanel>

  <bolt-tablabel>Third tab label</bolt-tablabel>
  <bolt-tabpanel>
    Content for third tab
  </bolt-tabpanel>

  <bolt-tablabel>Fourth tab label</bolt-tablabel>
  <bolt-tabpanel>
    Content for fourth tab
  </bolt-tabpanel>

  <bolt-tablabel>Fifth tab label</bolt-tablabel>
  <bolt-tabpanel>
    Content for fifth tab
  </bolt-tabpanel>

  <bolt-tablabel>Sixth tab label</bolt-tablabel>
  <bolt-tabpanel>
    Content for sixth tab
  </bolt-tabpanel>

  <bolt-tablabel>Seventh tab label</bolt-tablabel>
  <bolt-tabpanel>
    Content for seventh tab
  </bolt-tabpanel>
</bolt-tabset>

A tabset with a borderless attribute will remove the left, right, and bottom borders from the tab panel, while the top border extends the full width of the page or parent container. The current borderless tabs becomes full-width below the XL breakpoint.

<bolt-tabset borderless>
  <bolt-tablabel>First tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for first tab
  </bolt-tabpanel>

  <bolt-tablabel>Second tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for second tab
  </bolt-tabpanel>

  <bolt-tablabel>Third tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for third tab
  </bolt-tabpanel>
</bolt-tabset>

The future theme borderless tabs content aligns with a fixed width grid container at all breakpoints. To use future theme add the class .bolt-theme--future to the root .bolt-typography element i.e. the 'html' tag.

<html class="bolt-typography bolt-theme--future">
    ...
    <bolt-tabset borderless>
      <bolt-tablabel>First tab</bolt-tablabel>
      <bolt-tabpanel>
        Content for first tab
      </bolt-tabpanel>

      <bolt-tablabel>Second tab</bolt-tablabel>
      <bolt-tabpanel>
        Content for second tab
      </bolt-tabpanel>

      <bolt-tablabel>Third tab</bolt-tablabel>
      <bolt-tabpanel>
        Content for third tab
      </bolt-tabpanel>
    </bolt-tabset>
    ...
</html>

By default, tabset folllows the global theme. It applies a surface to the active tab and panel.

<div class="bolt-background-darkBlue">
  <bolt-tabset>
    ...
  </bolt-tabset>
</div>

Use the color attribute to have tabset inherit a background color context from its container.

<div class="bolt-background-darkBlue">
  <bolt-tabset color="contextual" borderless>
    ...
  </bolt-tabset>
</div>

You can also set a static color that is unaffected by global or contextual theme.

<div class="bolt-background-white">
  <bolt-tabset color="ultralightGray">
    ...
  </bolt-tabset>
</div>

The Tabset component consist of three custom elements:

1. <bolt-tabset>
2. <bolt-tablabel>
3. <bolt-tabpanel>

All three elements must be used together.

<bolt-tabset>
  <bolt-tablabel>First tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for first tab
  </bolt-tabpanel>

  <bolt-tablabel>Second tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for second tab
  </bolt-tabpanel>

  <bolt-tablabel>Third tab</bolt-tablabel>
  <bolt-tabpanel>
    Content for third tab
  </bolt-tabpanel>
</bolt-tabset>

Parent container for tabs and tabpanels.

• activetab (integer)
  • OPTIONAL: (default: 0)
  • zero-based index of the currently active tab+panel pair (0 = first tab, 1 = second tab, etc.)
  • may be set either as an HTML attribute or a JavaScript property (both strategies produce the same result)
• scroll (boolean; by presence)
  • When present, allows panel content to scroll vertically.
  • Use when the tabset height is limited.
• borderless (boolean; by presence)
  • When present, removes left, right, and bottom borders.
• color (string)
  • OPTIONAL: By default, tabset follows global theme.
  • contextual: allows tabset to inherit context from a parent container's background class
  • Static colors (not affected by global or contextual theme)
    • white
    • ultralightGray

The following JavaScript properties are available.

• tabs (Array)
  • read-only array of <bolt-tablabel> elements associated with the tabset
• tabpanels (Array)
  • read-only array of <bolt-tabpanel> elements associated with the tabset

The <bolt-tabset> element emits the following events.

• bolt-tab-changed
  • Emitted when an unselected <bolt-tablabel> is clicked by the user.
  • The event provides the following detail data:
    • tab: current <bolt-tablabel> element
    • tabpanel: current <bolt-tabpanel> element

Defines a tab label.

• MUST be an immediate child of <bolt-tabset> (i.e., matches bolt-tabset > bolt-tablabel)
• MUST be paired with a dedicated <bolt-tabpanel> element

• selected (boolean [false])

Defines a tab panel.

• MUST be an immediate child of <bolt-tabset> (i.e., matches bolt-tabset > bolt-tabpanel)
• MUST be paired with a dedicated <bolt-tablabel> element

• open (boolean [false])

• Tabsets and their content should directly relate to the page section they are within.
• The row of tabs should be positioned on top of a panel, not on the sides or the bottom where users often overlook them.
• There should never be fewer than 2 tabs. There should not be more than 6 tabs; these limitations reduce cognitive load.
• Only 1 tab should be active at a time.
• There should only be 1 row of tabs. Multiple rows create jumping screen elements, which negatively affects spatial memory, making it hard for users to remember which tabs they've already viewed.
• Tab labels should be concise, scannable, and descriptive.

• The active tab should not have a bottom border, it should appear as one with its corresponding panel. This emphasizes the panel that is shown and lets users know which tab is active, especially when there are only 2 tabs.
• If a tab's content is empty, hide the tab or include a message in the content area of the tab panel telling the user that it is empty on purpose.
• Avoid introducing scrolling into a tab panel.

• When it is beneficial for a user to be able to alternate between two or more sections of organized content.
• Use to display alternate views of the same or similar content.
• Use to group related information into distinct categories.

• Tabs should not be used to imply varying levels of importance.
• When there is a need for more than 6 tabs.
• When site navigation is desired. Tabs do not provide access to other screens.
• Do not use Borderless Tabset when there is external or unrelated content below the Tabset.
• Doing so may confuse internal and external content as one and the same.

• When content within multiple tabs needs to be viewed simultaneously, consider Accordions.
• Consider using a more prominent alternative when there is a need for more than 6 tabs.
• If any interface or content above the Tabset would change based upon a tab becoming active, avoid Tabset; use Link instead.
• Don't use a Tabset for sequential content; use new pages instead.

• Keep tab labels concise, ideally 1 to 2 words.
• Tab labels use sentence case.
• Tab labels should clearly describe what is inside each tab panel.
• Tab labels should be short for small displays.

• The first Tab key press should set the focus on the selected tab in the Tabset list. In this example, the focus would be set on the tab labeled "First tab".
• Navigating between tabs:
  • Pressing the right arrow key should move focus to the next tab. If on the last tab, focus wraps to the first.
  • Pressing the left arrow key should move focus to the previous tab. If on the first tab, focus wraps to the last.
• Pressing Enter should activate and select a focused tab, displaying the associated content panel. After selecting a focused tab, pressing Tab should move focus into the displayed content panel.
• Tab key navigation should move focus sequentially through all focusable elements in the active tab's content panel.
  • If no focusable elements exist in the content panel, focus should move to the next focusable element outside the Tabset.

• For WebKit-based browsers (i.e., Chrome, Safari, Edge, etc.), when using the arrow keys to focus on an unselected <bolt-tablabel> that appears after the selected <bolt-tablabel>, pressing the Tab key should target the selected <bolt-tablabel> instead of moving focus into the <bolt-tabpanel>.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.