Table of Contents

Description

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

Image Modified

Types

Type	Usage	Image
Main tabs	Single row above the associated content. Use it as tabbed navigation.	Image Modified
2nd level tabs	Use only as a second level to main tabs. Single row beneath the main tabs and above the associated content.	Image Modified
Details panel tabs	Use only in the Details Panel. Single row above the associated content.	Image Modified
Ribbon tabs	Use only in the /wiki/spaces/UserExp/pages/1390479038 as tabbed navigation.	Image Modified
Vertical Tabs	TBD	Image Added

Usage & Behavior

Tabs organize content into groups and allow navigation between them. Content should be:

...

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

States

	Main Tabs	2nd Level	Details Pane Tabs	Ribbon Tabs	Ribbon Tabs - Collapsed	Vertical Tabs
Regular	Image Modified	Image Modified	Image Modified	Image Modified	Image Modified	Image Added
Hover	Image Modified	Image Modified	Image Modified	Image Modified	Image Modified	Image Added
Active	Image Modified	Image Modified	Image Modified	Image Modified	Image Modified	Image Added
Selected	Image Modified	Image Modified	Image Modified	Image Modified	Expands the Ribbon	Image Added
Focused, Regular	Image Modified	Image Modified	Image Modified	Image Modified	Image Modified	Image Added
Focused, Hover	Image Modified	Image Modified	Image Modified	Image Modified	Image Modified	Image Added
Focused, Active	Image Modified	Image Modified	Image Modified	Image Modified	Image Modified	Image Added
Focused, Selected	Image Modified	Image Modified	Image Modified	Image Modified	Expands the Ribbon	Image Added

Interaction

Only one tab can be selected at a time.
A tab can be selected by clicking it.
Selecting a tab will change the view below to the new tab’s associated content.
Clicking on a new tab will automatically remove the selection from the previously-selected tab.
When the tab label is truncated, hovering over it will show a Tooltip with the full label.

Validations and errors

Tab item error	Image Modified	Image Modified
Tab item warning	Image Modified	Image Modified

Best practices

Use

to switch between views, data sets, or functional options.
when the content needs to be organized into exclusive groups.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Focus management

Keyboard	Description
Tab	Navigates between tabs (left to right). On the last tab navigates to the next component.
Shift + Tab	Navigates between tabs (right to left). On the first tab navigates to the previous component.
Space	Changes the view to the focused tab.
Enter	Changes the view to the focused tab.
Esc	N/A
Arrows	N/A

Responsive Design

Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).

...

Where tab labels do not fit within the tab width, the end of the labels should be truncated with an ellipsis ….
- The full label should be shown in a Tooltip on hover.
- For touch devices, the full label should be shown in a Tooltip on tap-and-hold.

...

Design

Zeplin link	Screen thumbnail
Main Tabs https://zpl.io/bPkL1ma	Image Modified
2nd Level Tabs https://zpl.io/2ZqjW0X	Image Modified
Details Pane Tabs https://zpl.io/VODWzzr	Image Modified
Ribbon Tabs - Expand https://zpl.io/bJvqAmE	Image Modified
Vertical Tabs https://zpl.io/a3JAPNx	Image Added