Tabs

Lab component

Also known as

Tab, Tabstrip, Tab bar, Tab set

Similar to

Resources

Support

TabNext and TabstripNext switch between different but related content. Users can move between different views without the need to leave the current page. A tabstrip comprises a minimum of two tabs, with one tab actively engaged at any given moment. The active tab is differentiated from an inactive tab by a colored indicator either on the top or bottom edge of the tab, depending on the variant in use. These tabstrips can expand the full width of the page or be used within content areas, or within components such as dialogs, cards, and drawers.

Best practices

Any focusable elements included in the tab content will need to be checked and tested accordingly.

Keyboard interactions

KeyFunction
Tab
  • If focus is on outside of tabs, Tab enters focus into tabs.
  • If focus is on a tab item, Tab exits the tab component and place focus onto the next element within the tabbing order.
Shift + Tab
  • If focus is inside a tab component, this action moves focus to the previous element in the tabbing order.
Enter / Space
  • If focus is on tab hover state, this action selects a tab item.
Left arrow / Right arrow
  • This action moves focus between tab items in tab bar.
Up arrow / Down arrow
  • This action moves focus between tab items in an overflow menu list.
Home
  • If focus is on a tab, Home moves focus to the first tab.
End
  • If focus is on a tab, End moves focus to the last tab.

Previous Page

System status

Next Page

Tag