Tabs

Basic

Controlled

• To control Tabs state, use selectedIndex and onChange props:

Uncontrolled

• If you do not need to subscribe to Tabs state changes, use defaultValue:

Disabled Tabs

• To disable a tab, pass the disabled prop to the TabListItem component.

Sizes

• Tabs 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

Tabs Variants

Horizontal

• Tabs supports 2 variant horizontal and vertical.
• Default variant is horizontal.

Vertical

• Pass the vertical prop to change the variant.

Scrollable

• Tabs supports scrollable by pass the control prop.

Horizontal

Vertical

Deletable

• TabListItem can have a close icon by passing the deletable prop to the Tab component.
• The close icon will be displayed on the right side of the tab when TabListItem is hovered or selected.
• Passing the onDelete prop to the Tab component to handle the close icon clicked event.

Custom Delete Icon

• You can customize the delete icon by passing the deleteIcon prop to the Tab component.

Customize

Destroy Inactive Tabs

• By default, the content of inactive TabPanel will be destroyed. Set destroyOnHidden={false} on Tabs to allow the content to remain rendered.

Accessibility

Tabs component follows WAI-ARIA recommendations on accessibility.

Keyboard interactions

Key	Description	Condition
ArrowRight	Focuses and activates next tab that is not disabled	vertical="false"
ArrowLeft	Focuses and activates previous tab that is not disabled	vertical="false"
ArrowDown	Focuses and activates next tab that is not disabled	vertical="true"
ArrowUp	Focuses and activates previous tab that is not disabled	vertical="true"
Home	Focuses and activates first tab
End	Focuses and activates last tab