Skip to main content

Tabs

Tabs in Storybook

Usage​

Overview​

Tabs allow users to navigate similar content on the same page. For example, you might have a series of tabs labeled "Get a quote," "Account log in," and "Claims." They help organize content into multiple categories, reducing cognitive load for the user.

For a detailed guide on when to use this component, explore the following UI component decision tree.

UI component decision tree for tabs


Formatting​

Anatomy​

Tabs formatting

Tabs appear in a set; each tab has a label and a content section.

Tabs consist of:

  1. Label: describes the content of the tab. Each tab has a label that provides the user with context.
  2. Content area: contains content related to that category. The content within tabs should consist of a cohesive set of items with a common theme.
  3. Active tab indicator: appears beneath an active tab. Only one tab can be active at a time.
  4. Chevron icon: allows users to bring overflow tabs within view.

Content​

UX writing considerations​

  • The content that lives within each tab should be cohesive and should have a common set of characteristics.
  • Use labels to clearly and succinctly describe the content that lives within each tab.
  • Tabs should be parallel in nature, without twisting the language to make them parallel.
  • Tab labels should be short (1 to 2 words) and should use plain language.
  • Tab labels use sentence case: capitalize the first word of a phrase and proper nouns.

Best practices​

  • Use tabs to alternate views within the same context. Users should not have to navigate to different areas. Tabs allow them to alternate views while staying in place.
  • Logically chunk content so each user can easily predict what they will find within each tab.
  • Arrange tabs logically but don't use tabs for sequential content that needs to be read in a particular order.
  • By default, set the first tab in a set to be active.
  • Avoid the temptation to use more than one row of tabs. We generally recommend no more than six tabs in a set.
  • Only use tabs when users do not need to compare content across multiple tabs.
  • Highlight the currently selected tab.
  • Ensure that unselected tabs are clearly visible and readable.
  • Display tabs on the top of the tab panel, rather than on the sides or bottom.

Behaviors​

States​

Tabs have hover, focus, and active states:

  • Hover: Provides feedback indicating that the user has placed a cursor over the element (desktop only). Tab labels change font color upon hover.
  • Focus: Provides feedback indicating that the user has highlighted the element, typically using an input method such as a keyboard or mouse.
  • Active: Provides feedback indicating that the user is clicking or tapping the element. Tabs that are active appear underlined.

Interactions​

Keyboard​

The TAB key moves focus to the first tab element in the sequence. Use the arrow keys to move between tab panels. If the tab panel contains focusable elements (such as a link or button) pressing the TAB key moves focus to the focusable element. If there are no focusable elements, the TAB key will move focus away from the tab panel to the next focusable element after the component.

Screen reader​

WAI-ARIA roles of 'tablist', 'tab' and 'tabpanel' are included to provide meaning to assistive technologies. When a tab panel is active the aria-selected value is set to 'true' to provide contextual information.

  • When interacting with tabs, users do not navigate to different areas. Instead, they alternate views within the same context.

Accessibility​

The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.

Be sure to follow guidance in this section and also in the WAI-ARIA Authoring Practices for Tabs.

When using this component in your applications:

  • Provide meaningful and descriptive titles for each tab. This assists users to understand the content within each tab panel, and provides for efficient navigation.
  • Ensure that the content within each tab panel is accessible by, for example, using semantic heading components, paying attention to color contrasts, & applying alternative text to images.