Tab

Tab element for creating tabbed interfaces that organize content into separate panels, allowing users to switch between views.

Note: Tab is not a dedicated CRAFT component. The properties below are documented using common element properties available in CRAFT.

Live Preview

This luxurious face oil is crafted with rare Kashmiri Saffron and 16 Ayurvedic herbs to brighten and nourish your skin.

Code

1<div class="tabs">
2  <div class="tabs__list" role="tablist">
3    <button
4      class="tabs__tab tabs__tab--active"
5      role="tab"
6      aria-selected="true"
7      aria-controls="panel-1"
8    >
9      Description
10    </button>
11    <button
12      class="tabs__tab"
13      role="tab"
14      aria-selected="false"
15      aria-controls="panel-2"
16    >
17      Ingredients
18    </button>
19    <button
20      class="tabs__tab"
21      role="tab"
22      aria-selected="false"
23      aria-controls="panel-3"
24    >
25      How to Use
26    </button>
27  </div>
28
29  <div class="tabs__panels">
30    <div id="panel-1" class="tabs__panel tabs__panel--active" role="tabpanel">
31      Panel 1 content...
32    </div>
33    <div id="panel-2" class="tabs__panel" role="tabpanel" hidden>
34      Panel 2 content...
35    </div>
36    <div id="panel-3" class="tabs__panel" role="tabpanel" hidden>
37      Panel 3 content...
38    </div>
39  </div>
40</div>

Brand Properties

Property	Type	Brand Default	HoB Value	TAE Value
Font	Dropdown	Open Sans	Open Sans	Open Sans
Weight	Dropdown	normal (400)	normal (400)	normal (400)
Size	Dropdown	14px	14px	14px
Text Color	Color picker	rgb(0,0,0)	rgb(0,0,0)	rgb(0,0,0)
Active Tab Background	Color picker	(varies)	#038012	#182C08
Inactive Tab Background	Color picker	transparent	transparent	transparent
Border Style	Dropdown	none	none	solid
Border Width	Input	0px	0px	1px
Border Color	Color picker	rgb(0,0,0)	rgb(0,0,0)	rgb(255,255,255)
Corner Radius	Input (px)	0	0	0
Padding	Input (px)	8	8	8
Margins	Input (px)	0	0	0

Variants

Underline Tabs (Default)

Pill Tabs

Boxed Tabs

Tabs with Icons

Disabled State

Accessibility

Use proper ARIA roles: tablist, tab, and tabpanel
Use aria-selected to indicate active tab
Connect tabs to panels with aria-controls and matching id
Support keyboard navigation: Arrow keys to move, Enter/Space to select
Hidden panels should have hidden attribute or display: none
Maintain focus management when switching tabs

Do's and Don'ts

Do

Use tabs for content that shares a common context
Keep tab labels short and descriptive
Limit to 5-7 tabs maximum
Make the active tab clearly distinguishable
Consider which tab should be active by default

Don't

Use tabs for sequential content (use steps instead)
Create tabs that navigate to different pages
Nest tabs within tabs
Use inconsistent tab label lengths
Disable all but one tab

Unmapped Brand Values

The following brand values are available but not directly mapped to Tab properties. These can be used for custom styling or integration with other elements.

Brand	Property	Value
HoB	Primary Color	#038012
HoB	Background	#FFF9EE
HoB	Body Font	Open Sans
TAE	Primary Color	#1A5129
TAE	Background	#FFFFFF
TAE	Body Font	Open Sans

Related Elements

Accordion - For expandable content sections
Material Tabs - Material Design tab implementation