Tabs

Tabs organize content into separate views where only one view is visible at a time.

Design

The Tabs component allows users to switch between different views or sections of content within the same page, without navigating away. It helps organize related information in a compact and easily accessible way, improving content discoverability and reducing cognitive load.

Tabs are often used when content is related but needs to be divided into smaller, manageable sections — for example, product details, settings, or data panels.

When to use it (and when not to)

Use Tabs when you need to:

• Organize related content into separate sections within the same context.
• Allow users to quickly switch between different views without leaving the page.
• Improve the clarity of complex or lengthy interfaces.

Avoid using Tabs when:

• The sections are not closely related or when users need to compare content side by side.
• There are too many tabs that would make navigation overwhelming.

Quick summary of accessibility & consistency

• Follow accessibility best practices to ensure Tabs are fully operable and understandable for all users.
• Use semantic roles and attributes according to the WAI-ARIA Authoring Practices.
• Maintain logical focus order and provide visible focus states.
• Make sure all tab actions are keyboard-accessible and that only one panel is visible at a time.
• Ensure contrast ratios and labels meet accessibility standards for clarity and usability.

Styling

Colors

Name	Applied as	Applied to
color-background-neutral-default	Background color	Tabs container (neutral)
color-background-neutral-default	Background color	Tabs container (neutral)
color-background-contrast-default	Background color	Tabs container (contrast)
color-background-contrast-default	Background color	Tabs container (contrast)
color-fill-contrast-default	Background color	Tab item (filled variant)
color-fill-contrast-default	Background color	Tab item (filled variant)
color-foreground-neutral-default	Text color	Tab item (neutral rested / hover / active)
color-foreground-neutral-default	Text color	Tab item (neutral rested / hover / active)
color-foreground-neutral-muted	Text color	Tab item (neutral disabled)
color-foreground-neutral-muted	Text color	Tab item (neutral disabled)
color-foreground-contrast-default	Text color	Tab item (contrast rested / hover / active)
color-foreground-contrast-default	Text color	Tab item (contrast rested / hover / active)
color-foreground-contrast-muted	Text color	Tab item (contrast disabled)
color-foreground-contrast-muted	Text color	Tab item (contrast disabled)
color-border-neutral-muted	Border color	Tab item (neutral rested / disabled)
color-border-neutral-muted	Border color	Tab item (neutral rested / disabled)
color-border-neutral-default	Border color	Tab item (neutral hover)
color-border-neutral-default	Border color	Tab item (neutral hover)
color-border-contrast-muted	Border color	Tab item (contrast rested / disabled)
color-border-contrast-muted	Border color	Tab item (contrast rested / disabled)
color-border-contrast-default	Border color	Tab item (contrast hover)
color-border-contrast-default	Border color	Tab item (contrast hover)
color-border-ev-default	Border color	Tab item (EV active)
color-border-ev-default	Border color	Tab item (EV active)

Spacing

Name	Applied as	Applied to
spacing-xs	Padding block	Tab item
spacing-xs	Padding block	Tab item
spacing-md	Padding inline	Tab item
spacing-md	Padding inline	Tab item
spacing-none	Gap	Tabs container
spacing-none	Gap	Tabs container

Text Styles

Name	Applied as	Applied to
Lorem Ipsum typography-body-6 (emphasis)	Text style	Tab item (selected)
Lorem Ipsum typography-body-6 (emphasis)	Text style	Tab item (selected)

Usage

Do

Guidance on how to use a component.

• Keep tab labels short, clear, and descriptive.
• Ensure there is always one — and only one — selected tab.
• Provide visible focus indicators for keyboard users.
• Use proper heading hierarchy within panels to maintain logical document structure.
• Avoid using tabs if content loads asynchronously without clear feedback — provide a loading indicator if necessary.
• Maintain sufficient color contrast for active and inactive states.
• Use the blue option only for EV Tools.
• Use the tabs without fill as default. Use the fill only in specific scenarios where this fill is needed (e.g. EV Tools such as Charging Time Calculator).

Don’t

Guidance on what to avoid when using a component.

• Don’t use <div> elements without appropriate ARIA roles to mimic tab behavior.
• Don’t allow multiple tabs to be selected at the same time.
• Don’t remove inactive panels from the DOM — use hidden instead to preserve accessibility.
• Don’t change focus automatically to the tab panel when switching tabs; keep focus on the active tab.
• Don’t rely solely on color or visual styling to indicate which tab is active — use additional cues like bold text or underlines.
• Don’t create tab labels that wrap onto multiple lines or truncate important information.
• Don’t use tabs for unrelated or excessively long content; consider splitting it into separate pages instead.

Develop

Styles

Tabs organize content into separate views where only one view is visible at a time.

<div class="tng-tabs">
  <button class="is-selected">Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
</div>

Default

Tab 1 Tab 2 Tab 3

Contrast

Tab 1 Tab 2 Tab 3

Schemes

EV

<button class="tng-tabs-item is-ev">EV</button>
<button class="tng-tabs-item is-ev is-selected">EV Selected</button>

Default

EV EV Selected

Contrast

EV EV Selected

Filled

<button class="tng-tabs-item is-filled">Filled</button>
<button class="tng-tabs-item is-filled is-selected">
  Filled Selected
</button>
<button class="tng-tabs-item is-filled is-ev is-selected">
  EV Filled Selected
</button>

Default

Filled Filled Selected EV Filled Selected

Contrast

Filled Filled Selected EV Filled Selected

States

Disabled

<button class="tng-tabs-item" disabled>Default</button>
<button class="tng-tabs-item is-filled" disabled>Filled</button>

Default

Default Filled

Contrast

Default Filled

Selected

Use .is-selected or aria-selected="true" to indicate the currently selected tab item.

<button class="tng-tabs-item is-selected">Selected Tab</button>

Default

Selected Tab

Contrast

Selected Tab

Advanced Structure

You can compose our existing layouts and utility classes to create more complex tab items, such as adding images.

By default a selected tab will have all its text in bold. If you want to limit the bold text to a single element, wrap said element in .tng-tabs-item-label.

<button class="tng-tabs-item is-selected">
  <div class="tng-stack align-items-center gap-sm">
    <div class="align-self-start">Label</div>
    <div class="tng-slot is-primary"></div>
    <span class="tng-tabs-item-label">
      Overview
      <span class="fg-primary-default">1</span>
    </span>
  </div>
</button>

Default

Label

Overview 1

Contrast

Label

Overview 1

Overflow

You can use the overflow utility to wrap the tabs container and enable horizontal scrolling when there are too many tabs to fit in the available space.

<div
  class="tng-overflow-scroll-indicators"
  data-overflow-start="true"
  data-overflow-end="true"
>
  <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  <div
    class="tng-overflow-scroll has-hidden-scrollbar is-inline"
    style="max-inline-size: 250px"
  >
    <div class="tng-tabs">
      <button class="tng-tabs-item is-selected">Tab 1</button>
      <button class="tng-tabs-item">Tab 2</button>
      <button class="tng-tabs-item">Tab 3</button>
      <button class="tng-tabs-item">Tab 4</button>
      <button class="tng-tabs-item">Tab 5</button>
    </div>
  </div>
  <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
</div>

Default

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5

Contrast

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5

Recipes

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Overview

Overview content goes here.

Features

Features content goes here.

Specifications

Specifications content goes here.

source code

Accessibility

For designers

• All states (active, disabled, hover) must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.

For developers

Roles & attributes

The Tabs component follows the WAI-ARIA Tabs pattern:

• The container has role="tablist"
• Each tab has role="tab" and aria-controls linking to its panel
• The active tab has aria-selected="true"
• Each panel has role="tabpanel" and aria-labelledby linking back to its tab
• Inactive panels use the hidden attribute

Keyboard interaction

Key	Action
← / →	Move focus between tabs (horizontal tablist)
Home / End	Move focus to first / last tab
Enter / Space	Activate the focused tab
Tab	Move focus into the active tab panel