Display tab content.

The Tabs contain an additional Hooks, see subsection useTabs for details.


Toggle display of different templates.


Hide Divider

Hide Border

With Icon

Show icon component on label button.

Scroll Behavior

If all tabs cannot fit in the width then then hidden tabs can be accessed through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)


Control components with imperatively style.



AttributeDescriptionTypeAccepted valuesDefault
initialValueinitial valuestring--
valuecurrent selected valuestring--
hideDividerhide default dividerboolean-false
hideBorderhide border on activeboolean-false
leftSpacespace area on the left sideCSSProperties-12px
onChangechange event(val: string) => void--
alignhorizontal alignment of each child itemjustifyContent-left
activeClassNameclassName of active child itemstring--
activeStylesstyle of active child itemobject--
hoverHeightRatioheight percentage of highlight blocknumber-0.7
hoverWidthRatiowidth percentage of highlight blocknumber-1.15
...native propsHTMLAttributes'alt', 'id', 'className', ...-

Tabs.Item.Props[alias: Tabs.Tab]

AttributeDescriptionTypeAccepted valuesDefault
label(required)display tab's labelstring--
value(required)unique ident valuestring--
disableddisable current tabboolean-false