Skip to main content

TabPanel

JSThis component requires JavaScript.
Component status:Beta
A TabPanel is a tabbed interface component where each tab is associated with a panel containing information related to that tab.
Tbdbitl land grant institution bringing together ideas and disciplines to create bold, new connections our strengths are an authentic and distinctive combination of qualities reflective of who we are welcome week Morrill Wooster land grant institution non magna quis tortor volutpat take your next step toward becoming a Buckeye.
<div class="bux-tabpanel">
<div class="bux-tabpanel__tabs" role="tablist" aria-label="An accessible tabpanel example">
<button id="bux-tabpanel__tab--1" class="bux-tabpanel__tab" role="tab" aria-selected="true" aria-controls="bux-tabpanel__panel--1">
John Glenn
</button>
<button id="bux-tabpanel__tab--2" class="bux-tabpanel__tab" role="tab" aria-selected="false" aria-controls="bux-tabpanel__panel--2" tabindex="-1">
Jack Nicklaus
</button>
<button id="bux-tabpanel__tab--3" class="bux-tabpanel__tab" role="tab" aria-selected="false" aria-controls="bux-tabpanel__panel--3" tabindex="-1">
Archie Griffin
</button>
</div>
<div id="bux-tabpanel__panel--1" class="bux-tabpanel__panel" role="tabpanel" aria-labelledby="bux-tabpanel__tab--1" tabindex="0">
...
</div>
<div id="bux-tabpanel__panel--2" class="bux-tabpanel__panel" role="tabpanel" aria-labelledby="bux-tabpanel__tab--2" tabindex="0" hidden="hidden">
...
</div>
<div id="bux-tabpanel__panel--3" class="bux-tabpanel__panel" role="tabpanel" aria-labelledby="bux-tabpanel__tab--3" tabindex="0" hidden="hidden">
...
</div>
</div>

When to use a TabPanel#

  • This is good when you want to allow users to expose content in a progressive or tabular manner.
  • You want to give users control over the content by toggling it or deferring it for later.

When to use something else#

  • If the text you are revealing is very long then it would be better to give that information its own page.
  • Long content and tabpanels can be problematic on mobile views because the user must scroll a lot and getting back to the tabs will provide a poor user experience.
  • Keep in mind that even though tabpanels shorten pages and reduce scrolling, they increase the interaction cost by requiring people to decide on tabs to interact with.

Implementation notes#

Each tab and panel pair must be associated with each other by the following properties:

Tab#

  • id="TAB_ID" — a unique identifier for the tab element.
  • role="tab" — tells assistive technologies that this element behaves like a tab
  • aria-controls="PANEL_ID" — tells assistive technologies that this element controls another element.
  • aria-selected="true|false" — tells assistive technologies that this element has been activated or not.
  • tabindex="-1" — removes non-active tabs from tab order so next tab goes to the active panel.

Panel#

  • id="PANEL_ID" — a unique identifier for the panel element.
  • role="tabpanel" — tells assistive technologies that this element behaves like a tabpanel.
  • aria-labelledby="TAB_ID" — tells assistive technologies that this element is labeled by another element.
  • tabindex="0" — places the panels into the tab order.
  • hidden — hides all non-active panels.

Each tab and panel must have an unique ID. If you are using multiple tabpanels on the same page you'll want to add a unique identifier to each tab and panel.

Delay attribute#

There is an optional attribute that you can add to the main <div> element.

  • data-delay — By adding a delay to the tabpanel each key stroke within the tablist will be delayed 300ms.

<div class="bux-tabpanel" data-delay></div>

Accessibility#

Keyboard support#

KeyFunction
Tab
  • When focus moves into the tab list, places focus on the active tab element.
  • When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element.
Right Arrow
  • Moves focus to the next tab.
  • If focus is on the last tab, moves focus to the first tab.
  • Activates the newly focused tab.
Left Arrow
  • Moves focus to the previous tab.
  • If focus is on the first tab, moves focus to the last tab.
  • Activates the newly focused tab.
HomeMoves focus to the first tab and activates it.
EndMoves focus to the last tab and activates it.