Skip to content
Toyota Motor Europe DXP Reference Guide

Tabs

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>

Schemes

Section titled “Schemes”

EV

Section titled “EV”
<div class="tng-tabs">
  <button class="is-ev is-selected">EV Selected</button>
  <button class="is-ev">EV</button>
</div>

Filled

Section titled “Filled”
<div class="tng-tabs">
  <button class="is-filled is-selected">Contrast Selected</button>
  <button class="is-filled">Contrast</button>
</div>

States

Section titled “States”

Disabled

Section titled “Disabled”
<button class="tng-tabs-item" disabled>Disabled</button>

Selected

Section titled “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>

Advanced Structure

Section titled “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>
  </div>
</button>

Overflow

Section titled “Overflow”

You can use our 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>

Recipe

Section titled “Recipe”

Overview content goes here.

source code

Accessibility

Section titled “Accessibility”

The Tabs component follows WAI-ARIA Tabs Pattern guidelines:

  • 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