Users interact with Tab as they would a button, the main difference is the outcome. By default, the first tab from the left is active and the associated content displayed in the tab panel. Upon selecting a different tab, the tab indicator appears on the selected tab. The tab panel will then update to show the new content.
Additionally, the tab element is keyboard-navigable (See Accessibility: Keyboard Support)
Tabs were created to shorten long pages. Before you use these, we’d recommend laying out all of the content on your page out first. From there, figure out common themes and see what could be grouped together. Those themes should become your Tabs.
# Relate to the page title
Tabs are not navigation. Meaning they don’t take you from place to place. Rather, they are meant for context switching related to the page.
# Position above major content
Tabs are best used at the top of the page or situated above the content it’s related to. This will help establish hierarchy.
# Don't stack tabs
Use Tab sparingly. Limit the Tab component to one per page, and refrain from including a second set of Tabs within a tabpanel.
# Content Guidelines
- Refrain from using tabs without tabpanels.
- Don't have more than 8 tabs in a tablist.
- Don't 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.
# Keyboard Support
|Tab||When focus moves in to |
|Unlike the right arrow key, if you tab past the last element, the tab focus continues down the page as normal. In this case, it should set focus in to the active |
|Enter Space||When focus is placed on a tab, the corresponding |
|Right Arrow||When focus is within the |
|If the last tab is focused the focus is moved to the first tab.|
|Left Arrow||When focus is within the |
|If the first tab is focused the focus is moved to the last tab.|
|Home||If a tab has focus, the focus is moved to the first tab.|
|End||If a tab has focus, the focus is moved to the last tab.|