Tabs are a UI component used for organizing information by showing one grouping of information while hiding other related items at the same time.

Usage

Some quick things to follow when using tabs:

• Never nest tabs (never have tabs within tabs within the same content section).
• Only show read-only information within tabs (no data entry).
• Everything underneath the tab group belongs to the active tab and the tabs should fall on the grey background.
• Tabs in a single “tile”/white container are easier to understand and manage. Use header levels to distinguish information under a tab.
• Limit number of tabs to 7 or less.