Tabs

Tabs are labeled controls that allow users to switch between multiple views within a page. Tabs do not take the user to a new URL. To take users to a new URL, use In Page Navigation.

Panels within a set of Tabs should present different views of similar, parallel information. For example, these Twilio docs contain a block of code on the right side of the page with Tabs, allowing users to view the code in different languages. Reddit also uses tabs, switching the user’s view between Posts, Communities, and Related Topics. The Tabs in both of these examples control views; they don’t direct to a new page. Conversely, the Github website demonstrates how some interactions may seem like Tabs, but are actually in-page navigation. Clicking on one of the sections at the top, like Code or Pull Requests, changes the URL.

Distinguishing between the two components (Tabs and In Page Navigation) leads to an improved user experience by visually communicating that interacting will lead to different behaviors. Selecting the correct component based on your use case also gives users of assistive technologies a better idea of where the interaction will lead.

Choose Tabs when users don’t need to see content from multiple views simultaneously. When thinking through what type of content to put in your Tabs, remember that the content should be parallel across the board. What lives in one Tab should be a different view of what lives in another Tab.

The Tabs component contains the following elements:

• Tab: Clickable element that causes a selection within a tabset
• TabPanel: Contains the content associated with the selected Tab
• TabList: A collection of Tabs
• TabPanels: A collection of TabPanels
• Tabset (or Tabs): Composition of TabList and TabPanels

A Tab should never contain an interactive element, as doing so makes it difficult for users of assistive technologies to focus or click on the Tabs. Interactive elements may live within the TabPanels.

When the user is focused on a tab in a TabList, the following keyboard interactions apply:

• Horizontal Tabs: Right and Left arrow keys move the user between Tabs and open the currently focused Tab's panel
• Vertical Tabs: Up and Down arrow keys move between Tabs and open the currently focused Tab's panel
• If the currently focused Tab is disabled, the TabPanel does not open

Tabs are used to layer related pieces of information together and display one layer at a time on the same URL. Use Tabs to alternate between views within the same context. In Page Navigation is a collection of anchors, rather than buttons. Use In Page Navigation to switch between different, related pages. Tabs replace the entire view based on the selected tab. In Page Navigation links navigate the user to a new page.

Use Horizontal Tabs in most cases, as they most realistically mimic a physical tab, and they catch the user’s attention because they live directly above the content.

Use full-width Tabs to fill a parent element with a set width. Each Tab will equally expand and fit the width of the containing element. Full-width Tabs are recommended for compact spaces.

Use Vertical Tabs when the TabPanels are tall and narrow, or when users tend to swap views often as they scroll through the content.

The state prop allows you to hook into, and keep in sync the state of the Tabs and the state of your application.

This will allow you to set the initial state and merge the returned state from the hook with the application state, and keep it in sync with user interactions.

You could use this if you want to add functionality to a Button within the Tab content. In the example below we're using the select function from the Tab state to advance to the next Tab, and go back to the previous Tab.

Don't add interactive elements to a Tab, as doing so makes it difficult for users of assistive technologies to focus or click on the Tabs. Interactive elements may live within the TabPanels.

Tab labels should be short to improve readability. Users should be able to easily scan the Tabs and know what type of content to expect. Try to keep labels to 1-2 words each.

Labels should be parallel parts of speech. For example, all nouns (Documents, Images, Downloads).