Components

Tabs

Overview

Overview

When to use

Use tabs to group related information into different categories, helping to reduce cognitive load.

When not to use

• Don’t use tabs to create primary navigation that links to other pages.
• Don’t use tabs for content that is not related.

Accordions vs Tabs

If you decide to use one of these components, consider if:

• the user needs to look at more than one section at a time – an accordion can show multiple sections at a time, unlike tabs
• the user needs to switch quickly between sections – tabs can show content without pushing other sections down the page, unlike accordions
• there are many sections of content – accordions can fit more sections as they’re arranged vertically, unlike tabs which are arranged horizontally.

Principles

Tabs are always used in a tab group. Since they are used to switch between multiple contexts, tabs cannot be used standalone (minimum 2 tabs required) and only one tab can be selected at a time.

Do not hide important information inside tabs, and keep the number of tabs low wherever possible.

Use short tab labels that are clear and specific. Labels should be 1-2 words and should clearly communicate the view users will see and the content contained in the view.

It is recommended that the maximum amount of tabs in a single tab list is 7.

Size

Regular

Regular size should be the preferred option in most cases.

Compact

Compact size has reduced font size and spacing. It may be used in dense and data-heavy layouts.

Divider

The bottom divider line should extend to the width of the content area.

If the tab group and tab content are placed on a different background, then the divider line may be removed to reduce visual noise.

Overflow

When a tab group's container does not have enough space to display all of the tabs, this tab group becomes scrollable by dragging the tab bar or by clicking on the arrow buttons.

Try to use this behavior only on smaller screens (tablets and phones). Overflowing tab group on a larger screen (1280px and up) is usually a sign of excessive complexity and you may want to reduce this complexity by splitting your content into multiple sections or by using other components to display the content (for example accordions).

Disabled tabs

Usage

Usage guidelines

No single tabs

Do not show a single tab. Use heading instead.

Do

Don't

Overflow

Avoid multiple rows of tabs. Use scrolling instead.

Do

Don't

Labels

Use as few words as possible to describe each tab label.

Do

Don't

Accessibility

Keyboard

The tabs follow the WAI-ARIA tabs pattern with manual activation:

• Tab moves focus into the tab list, landing on the selected tab, and from there to the visible panel.
• Arrow Right / Arrow Left move focus to the next or previous tab, wrapping at the ends. Focus moves; the selection does not change.
• Home / End move focus to the first or last tab.
• Enter or Space selects the focused tab and shows its panel.

Only the selected tab is in the Tab order (roving tabindex). A disabled tab stays focusable so it can be discovered, but it cannot be selected.

Screen readers

The list is role="tablist", each button is role="tab" with aria-selected and aria-controls, and each panel is role="tabpanel" labelled by its tab through aria-labelledby. Disabled tabs use aria-disabled="true" and are announced as unavailable. Panels have tabindex="0" so a panel without focusable content can still be reached and read.

On scrollable tab lists the arrow buttons are named by scrollLeftLabel and scrollRightLabel. If a focused arrow disappears because the list reached its end, focus moves to the other arrow or to the selected tab instead of being lost.

Using the example

• Tab and panel ids (<id>-tab-N, <id>-panel-N) must be unique on the page.
• The scroll arrow labels default to English ("Scroll left", "Scroll right"). Pass Estonian labels on Estonian pages, and add lang="et" to the container if the surrounding page is in another language.
• With content off, the template renders no panels and no aria-controls. Only use that when the tabs control content elsewhere that you wire up yourself.