...

Tabs enable content organization at a high level, such as switching . They allow the user to switch between views, data sets, or functional aspectsoptions.

Types

Main tabs	Single row above the associated content. Use it as tabbed navigation - Single row above their associated content.
2nd level tabs	Single row above their associated content. Appear Use only as a second level to main tabs hierarchy. Single row beneath the main tabs and above the associated content.
Details pane panel tabs	Use only in the Details Panel. Single row above their the associated content. Appear only in the details pane
Ribbon tabs	Use it only in the Ribbon as tabbed navigation in the ribbon only.

Usage & Behavior

Tabs organize content into groups and allow navigation between groups of content that are related and them. Content should be:

• related.

• at the same level of the content hierarchy.

General guidelines

Structure

The horizontal layout of the tab bar never changes. The tabs always appear side by side

• There's always one tab selected at a time

Structure Elements

...

Tab item

• Display a navigation text element arranged together with the active/inactive highlighted

Active tab

...

Tabs consist of:

• Tab items, shown using short text labels.

• Divider line between beneath the tabs, above the content.

• Active tab. To differentiate the active tab from inactive tabs, apply a 3 px colored underline

  and color change to the active tab’s highlighted.

Content

• The label describes its content and sets user expectations

• Each tab label describes the content contained within it

• one to two words maximum

• Icons are not permitted as tab labels

...

• . (Designs for tabs in the Details Panel and Ribbon are different).

The horizontal layout of tabs never changes.

• They always appear side by side in a single row.

• There's always one tab selected at a time.

Default state

By default, the left tab is the first active tab show as open. Note: This is the initial setting provided by the control.
Note: Technically, Technically you can also override the initial selection. However, this but it is not recommended.

...

Subsequently,

...

the tab last selected by the user can be shown instead.

Content

• The label describes the content contained within each tab, and sets user expectations

• They should be short, one to two words maximum.

• Icons are not permitted as tab labels.

States

Regular
Hover
Active
Selected
Not selected focusedFocused, Regular
Not selected focused hoverFocused, Hover
Not selected focused activeFocused, Active
Focused, Selected focused

Interaction

• You can click on the entire label

• Tabs can be switched by clicking on a different tab

• Only 1 content can be viewed at a time when clicking on another tab the display will change for the selected tab

• When the Only one tab can be selected at a time.

• A tab can be selected by clicking on the entire label. This will change it to active and show the tab’s content.

• Clicking on a new tab will automatically remove the selection from the previously-active tab.

• When the tab label is truncated, hovering over it will show a tooltip Tooltip with the full label

Validations and errors

Tab item error
Tab item warning

Best practices

• Use clear and short labels.

• Keep in mind that at reduced mobile widths and during translation, space for translated labels - the character length of a label will impact the experience. Do not use icons in the for tab labellabels.

• A maximum of six tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.

• In the details pane Details panel, a maximum of four tabs is recommended.Use clear and short labels

• Tab order should be consistent across an experience.

• Tabs with related content should be grouped adjacent to each other.

...

Each component should be A11y complied,  please . Please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3.

Focus management

We already set a general guidelines described in Keyboard & Focus Management Guidelines

...

• Maximum tab number - vertical and horizontal

• Scroll tab - out of the window

• Align tab solutioan solution between mobile and desktop (card / line)

• Decide about maximum letter on title

...