Nim, the Okta Design System

Tab

Tabs are a navigational component used to organize content by grouping similar information on the same page. They allow content to be viewed without having to navigate away from that page or route.

Tab Panel 0: Agents

    <div class="ods-tabs" id="example-0" style="
      --ods-tabs-indicator-width: 71px;
      --ods-tabs-indicator-pos-x: 0;
    ">
      <div class="ods-tabs--tablist" role="tablist" aria-label="">
        <button class="ods-tabs--tab" id="tablistitem-0-0" role="tab" aria-selected="true" aria-controls="tab-0-0">Agents</button>
        <button class="ods-tabs--tab" id="tablistitem-0-1" role="tab" aria-selected="false" aria-controls="tab-0-1">People</button>
        <button class="ods-tabs--tab" id="tablistitem-0-2" role="tab" aria-selected="false" aria-controls="tab-0-2">Settings</button>
        <button class="ods-tabs--tab" id="tablistitem-0-2" role="tab" aria-selected="false" aria-controls="tab-0-3">Import</button>
      </div>
      <div class="ods-tabs--tabpanel">
        <div id="tab-0-0" tabindex="0" role="tabpanel" aria-labelledby="tablistit-0-0">
          <p>Tab Panel 0: Agents</p>
        </div>
        <div id="tab-0-1" tabindex="0" role="tabpanel" aria-labelledby="tablistitem-0-1" hidden="">
          <p>Tab Panel 1: People</p>
        </div>
        <div id="tab-0-2" tabindex="0" role="tabpanel" aria-labelledby="tablistitem-0-2" hidden="">
          <p>Tab Panel 2: Settings</p>
        </div>
        <div id="tab-0-3" tabindex="0" role="tabpanel" aria-labelledby="tablistitem-0-3" hidden="">
          <p>Tab Panel 3: Import</p>
        </div>
      </div>
    </div>

Usage

Do

  • Place tabs as high as possible in your main content area.
  • Use tabs to allow users to switch quickly between related pieces of information.

Don't

  • Use tabs without tabpanels.
  • Use tabs as navigation. Meaning they don’t take you from place to place. Rather, they are meant for context switching related to the page.
  • Nest tabs within a tabpanel. Tabs should live as high up in the main content area hierarchy as possible.
  • Have more than 8 tabs in a tablist.
  • Add an icon to a tab. Icons should be reserved for very specific things. It can be hard to maintain consistency with use of icons as it pertains to their semantic meanings and meaning to Okta. Without an established icon repo, it’s best to not use them for now.

Switching tabs

The JS included here is for demo purposes only. For those implementing the Tab component from scratch, be sure to implement the behavior as follows:

  1. Update the CSS custom properties to animate the Tab indicator correctly. (See CSS custom properties)
  2. Set the select tab button's aria-selected attribute to true. If a different tab was previously selected, that tab button's aria-selected attribute must be set to false.
  3. The tabpanel corresponding to the tab button is shown. This is done by removing the hidden attribute on the tabpanel. If a different tabpanel was previously visible, the hidden attribute is applied to it.

CSS custom properties

The tab indicator's left position and width are changed by updating CSS custom properties on the .ods-tabs element. The custom properties are as follow:

Odyssey takes care to ensure apropriate keyboard navigation for the tab component.
CSS variable Description
--ods-tabs-indicator-width The width of the tab indicator
--ods-tabs-indicator-pos-x The position of the tab indicator along the x-axis

In the following example, you can see the tab indicator position is on the second element:

Tab Panel 1: People

<div class="ods-tabs" id="example-1" style="
    --ods-tabs-indicator-width:69px;
    --ods-tabs-indicator-pos-x:75px;
">
  <div class="ods-tabs--tablist" role="tablist" aria-label="">
    <button class="ods-tabs--tab" id="tablistitem-1-0" role="tab" aria-selected="false" aria-controls="tab-1-0">Agents</button>
    <button class="ods-tabs--tab" id="tablistitem-1-1" role="tab" aria-selected="true" aria-controls="tab-1-1">People</button>
    <button class="ods-tabs--tab" id="tablistitem-1-2" role="tab" aria-selected="false" aria-controls="tab-1-2">Settings</button>
    <button class="ods-tabs--tab" id="tablistitem-1-2" role="tab" aria-selected="false" aria-controls="tab-1-3">Import</button>
  </div>
  <div class="ods-tabs--tabpanel">
    <div id="tab-1-0" tabindex="0" role="tabpanel" aria-labelledby="tablistit-1-0" hidden="">
      <p>Tab Panel 0: Agents</p>
    </div>
    <div id="tab-1-1" tabindex="0" role="tabpanel" aria-labelledby="tablistitem-1-1">
      <p>Tab Panel 1: People</p>
    </div>
    <div id="tab-1-2" tabindex="0" role="tabpanel" aria-labelledby="tablistitem-1-2" hidden="">
      <p>Tab Panel 2: Settings</p>
    </div>
    <div id="tab-1-3" tabindex="0" role="tabpanel" aria-labelledby="tablistitem-1-3" hidden="">
      <p>Tab Panel 3: Import</p>
    </div>
  </div>
</div>