Tabs

When to use

Tabs are suitable for organizing content into distinct categories or sections within a single view.

Segmenting Content

Tabs are ideal for clustering content when they can be split into separate sections or categories. By grouping related information into different tabs, it reduces overload, and users can navigate through content more efficiently, thus helping to decrease cognitive load.

Enhanced Workflow

Tabs facilitate seamless user task completion by organizing content like forms, settings, and dashboards within the same interface, eliminating the need for users to navigate away from their workflow.

When not to use

While tabs can be a valuable clustering tool, they might not always be the best choice. Here are some scenarios where you need to find different alternatives.

Simultaneously Content

Avoid using tabs if users need to compare information in two groups, as constant switching between tabs increases cognitive load and interaction cost. Don't use it when users don't need to view content from multiple tabs simultaneously.

Hiding Information

Be cautious when hiding critical information behind tabs, leading users to overlook important details and ensuring that essential information is readily accessible without excessive tab navigation, enhancing user experience and usability. Additionally, nesting tabs within tabs can create usability issues and confuse users. Instead, consider alternative components like accordions.

Anatomy

Tabs are a combination of a tab list and a tab panel. The tab list contains the navigation tabs. When there is overflow, it shows the "more button" to open the tabs popover. The tab panel presents content for selected tabs.

Tabs Popover

When overflow occurs, we provide a "more button" to display the hidden tabs. We are using the popover; you can check more details here.

States and Status

Tabs come with multiple states, each suited for different interactions, and two status. The states provided are default, hover, active, disabled and focus, but we need to differentiate between those two alternative status:

• Unselected: This tab appearance is the inactive version and provides a visually clear design. Making it easy for the user to scan the content and make a quick choice.

• Selected: This tab appearance is the inactive version and provides a visually clear distinction to make it easier for the user to see where they are in the interface.

Orientation

The orientation of tabs plays a significant role in determining the layout and functionality of the user.

• Horizontal: In this orientation, tabs are arranged side by side, at the top of the content area. It provides much more space optimization. They offer easy access to the content and are commonly used in desktop applications or website interfaces.

• Vertical: This version displays the tabs in a column stack, usually along the left or right side of the panel. Vertical tabs are beneficial when the content height exceeds its width, providing efficient navigation for lengthy lists or categories.

Figma Options

With these options, you can tweak the appearance of the tabs in Figma. They are available in the Design Panel so you can compose the tabs to exactly fit the user experience need for the use case you are working on.

Tab List

The tab list provides the options to set up the version of the component that you need.

Tabs

This are the tab buttons to switch between content.

Behavior

Understanding the behavior of tabs is crucial for creating intuitive and user-friendly content access. Tabs exhibit various characteristics and functionalities that impact how users interact with them.

No Label Wrap

When the labels may exceed the available space, especially in lengthy titles. We don't wrap the labels, preventing truncation to ensure users can still identify and access tabs without sacrificing usability. To solve the hide tabs, we provide an overflow tabs button.

Focusable Area

Tabs should provide a focusable area to accommodate keyboard navigation. The focusable area allows users to navigate between tabs, enhancing usability and accessibility for all users.

Overflow Tabs

In cases where the number of tabs exceeds the available space, overflow buttons offer a solution for managing tab visibility. The overflow tabs menu provides a solution for accessing hidden tabs. The tabs list is also scrollable, allowing users to move horizontally to view additional tabs.

Tab group API

Component has a range of properties to define the experience in different use cases.

Properties

Events

Slots

CSS Properties

CSS Parts

Tab panel API

Component has a range of properties to define the experience in different use cases.

Slots

Tab API

Component has a range of properties to define the experience in different use cases.

Properties

Slots

Content

Creating an inclusive application requires more than just writing great code. It also involves writing clear and concise copy. Keep the users while writing the tab's titles and subtitles.

Short Tab Labels

Use plain language and keep labels short, usually 1-2 words. Longer labels may indicate that choices are too complex for a tab control. Simplify options to make them user-friendly.

No All Uppercase

Avoid using all caps for tab labels. It's harder to read. Use consistent capitalization style, either sentence-case or title-style.

Keyboard interactions

Keyboard interactions within a tabs group allow users to navigate options using arrow keys or the Tab key, facilitating efficient selection and ensuring accessibility for those who rely on keyboard navigation. Typically, users can navigate to the tabs using the "Tab" key, once they're in the first tab they can focus the different options with Arrow keys. Then they can select a new tab with the "Spacebar" or "Enter" key. Keyboard interaction ensures that individuals who rely on keyboard navigation or assistive technologies can easily control tabs within a user interface.

WAI-ARIA

WAI-ARIA Roles, States, and Properties for tabs provide essential information to assistive technologies and screen readers. They convey the tabs's role, state (checked, unchecked, valid and invalid), and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.

Specifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)

Tab Group

Tab

Tab panel