Tabs

Filtering the same content

When toggling between different formats of the same content or filtering the same content, use content switcher instead. Content switcher is often used alongside tabs, but it typically serves at a lower hierarchy to organize related content within the tab's contents.

Indicating progress

When the user needs to work through a step by step linear process, use a progress indicator. Tabs help organize information hierarchically but remain flexible in how content can be designed and consumed.

Comparing information

Tabs should not be used if the user needs to compare information in different groups, as this would result in the user having to click back and forth to complete a task.

Auto-width alignment

Auto-width alignment is the default behavior for both line tabs and contained tabs. Each tab will be a different size depending on the label's character count but will have consistent padding on each side of the label. The first label, selected by default, should align to the grid. Where the tabs end will vary and may not end on the grid.

Grid aware width alignment

Instead of using the default auto-width alignment behavior, contained tabs can have grid aware alignment. The tabs span a set of columns as a group, with each tab equal in width. The first tab's label should align with the first column you are using, with the last tab in the group always ending at a column's edge. The tabs in between will flow accordingly and may or may not align with the grid, but they will always be the same width size.

Use the 2x grid to drive visual rhythm by spacing content in multiples of two columns and aligning the beginning and ending of the tab elements with content below the tabs when possible. Depending on breakpoints, vertical tabs align to grid columns spanning 4 or 2 columns of the 16-column grid and connect to a tab panel that can be 8 or 12 columns wide. See vertical tabs for more information on breakpoints and responsiveness.

Use grid aware contained tabs when:

• When there are four tabs or less

• When the tablist can fit on the 2x grid easily without crowding labels

• Labels are short and concise

• When other elements on the page can align to the tablist

Alignment with tab labels

Much like buttons, alignment of tabs depends on where they appear and whether or not they're contained within another component. As a general rule, the first label for both line tabs and contained tabs align with the grid and the text below. If tabs are within another component, such as a card, follow the grid that you are using inside the component and align the label with text in the component. Vertical tab labels also align with the grid, so all labels in a tablist will align on the same grid column.

Alignment within a component

When using line tabs within a component (like a modal), the first label should always align to the other content in the space. Do not use contained tabs. The edges of the line tab may also bleed to the edges of the space if needed depending on the container's margins. A trailing rule may be added from the end of the last tab to the edge of the content area to add hierarchical clarity and balance the tabs with the other content.

Labels

• Use short tab labels that are clear and specific. Labels should be one to two words, as these are easier to scan. Vertical tabs allow for more characters within a tab, but stay as concise as possible to avoid truncation and allow space for labels in various languages.

• Text labels should clearly communicate the view users will see and the content contained in the view.

Secondary labels

• Contained tabs can have secondary labels to add clarity or assist the user in choosing the right selection.

Mouse

Users can trigger a state change by clicking anywhere in the container area.

Keyboard

One tab should be selected by default. Users can navigate between tabs by pressing right or left arrow keys. For additional keyboard interactions, see the Accessibility tab.

Automatic and manual

Automatic and manual tablists differ in how the tab items are activated.

For automatic tablists, focus and selection are synchronized. When the user arrows to a tab, it becomes selected, and the tab panel under the tab updates automatically. Use automatic tabs when tab panel content can load quickly, allowing for users to scan quickly through information to make a decision without latency.

Manual tablists allow the user to arrow between the tab items without updating the tab panel underneath. When the user navigates using arrows, the selected tab remains selected while focus moves to the next tab. In order to select the focused tab (and update the tabpanel under the tab), the user would press Enter or Space. Use manual tabs when information in the tab panel will take a longer time to load. This will allow a keyboard user or screen reader to navigate through the tablist without having to wait for content to load. Learn more about automatic verses manual tablists in the Keyboard interactions section of the accessibility tab.

For additional information, see the Accessibility tab.

Breakpoints

When using tabs that have grid aware width alignment, they should follow these responsive rules:

• Max, XLG, and LG breakpoints: Use eight grid aware tabs or less.

• MD and SM breakpoints: Grid aware tabs will automatically change to auto-width alignment to reduce extra space on smaller screens.

When to use

• Use dismissible tabs to offer flexibility and scalability in complex interfaces that require users to create multiple sections or modules.

• Use dismissible tabs for content created or curated by the user.

• Use to focus a specific data set or search results.

When not to use

• Do not use when tabs contain frequently used or critical information.

• Do not use as navigation.

Dismissible tabs with icons

Carbon provides an option to include icons within the dismissible tabs. Only use icons within dismissible tabs if all tabs will include icons. Do not mix dismissible tabs without icons with dismissible tabs with icons.

Dismissing a tab

When dismissing a tab, an inline warning or modal may be used when information contained in a tab will no longer be accessible or difficult to retrieve. Since warnings, especially modals, are highly disruptive, only use when the dismissal causes errors, unintentional deletions, or unsaved changes.

Triggering a new tab

There are various ways to trigger a new tab. The trigger button can visually change its shape and size depending on the use case. Keep the trigger close enough to the new tab to associate the add action with the new tab item. The order of tabs can be ascending or descending depending on use case but do keep them in a sequential, logical order.

If all tabs are dismissible, make sure a user understands how to trigger new tabs once the tabs are gone. Provide visual cues, such as a container or placeholder tab, so the user clearly understands that the trigger button is creating a new tab in a place they expect.