Tab Group

Basic

Uncontrolled

• By default, the group is closed. To have it open initially, use the defaultOpen prop:

Controlled

• To manage the open state of the group, use the open and onOpenChange props:

Colors

• TabGroup supports 6 colors: blue, green, orange, red, royal, and purple. The default color is blue.
• The active tab’s color matches the color of its group. For standalone tabs (not in a group), the active color defaults to primary.

Default value

• The TabGroup component allows you to set a default color for the entire group using the defaultColor prop.
• The defaultColor prop accepts a value of type ColorOption, which defines the available color options in the design system.

Controlled value

• You can control the color of a group by using the color and onColorChange props.
• The color prop sets the current color, and onColorChange is called when the user selects a new color.

Sizes

• TabGroup supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Accessibility

TabGroup component follows WAI-ARIA recommendations on accessibility.

Keyboard interactions

Key	Description	Condition
Enter / Space	Open/Collapse the TabGroup items	Focused to TabGroup element