The alignment of the tabs
Tabs
A React component that helps you build accessible tabs, by providing keyboard interactions and ARIA attributes described in the WAI-ARIA Tab Panel Design Pattern.
Props#
Tabs Props#
Tabs composes Box so you call pass all Box related props.
align
alignDescription
Type
"center" | "end" | "start"colorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"defaultIndex
defaultIndexDescription
The initial index of the selected tab (in uncontrolled mode)
Type
numberdirection
directionDescription
The writing mode direction. - When in RTL, the left and right navigation is flipped
Type
"ltr" | "rtl"Default
"ltr"id
idDescription
The id of the tab
Type
stringindex
indexDescription
The index of the selected tab (in controlled mode)
Type
numberisFitted
isFittedDescription
If true, tabs will stretch to width of the tablist.
Type
booleanisLazy
isLazyDescription
Performance 🚀:
If true, rendering of the tab panel's will be deferred until it is selected.
Type
booleanisManual
isManualDescription
If true, the tabs will be manually activated and
display its panel by pressing Space or Enter.
If false, the tabs will be automatically activated
and their panel is displayed when they receive focus.
Type
booleanlazyBehavior
lazyBehaviorDescription
Performance 🚀: The lazy behavior of tab panels' content when not active. Only works when `isLazy={true}` - "unmount": The content of inactive tab panels are always unmounted. - "keepMounted": The content of inactive tab panels is initially unmounted, but stays mounted when selected.
Type
LazyModeDefault
"unmount"onChange
onChangeDescription
Callback when the index (controlled or un-controlled) changes.
Type
((index: number) => void)orientation
orientationDescription
The orientation of the tab list.
Type
"horizontal" | "vertical"Default
"horizontal"size
sizeType
"sm" | "md" | "lg"Default
"md"variant
variantType
"line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"Default
"line"Tab Props#
id
idType
stringisDisabled
isDisabledDescription
If true, the Tab won't be toggleable
Type
booleanisSelected
isSelectedType
booleanpanelId
panelIdType
stringProps#
Tabs Props#
Tabs composes Box so you call pass all Box related props.
align
alignDescription
The alignment of the tabs
Type
"center" | "end" | "start"colorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"defaultIndex
defaultIndexDescription
The initial index of the selected tab (in uncontrolled mode)
Type
numberdirection
directionDescription
The writing mode direction. - When in RTL, the left and right navigation is flipped
Type
"ltr" | "rtl"Default
"ltr"id
idDescription
The id of the tab
Type
stringindex
indexDescription
The index of the selected tab (in controlled mode)
Type
numberisFitted
isFittedDescription
If true, tabs will stretch to width of the tablist.
Type
booleanisLazy
isLazyDescription
Performance 🚀:
If true, rendering of the tab panel's will be deferred until it is selected.
Type
booleanisManual
isManualDescription
If true, the tabs will be manually activated and
display its panel by pressing Space or Enter.
If false, the tabs will be automatically activated
and their panel is displayed when they receive focus.
Type
booleanlazyBehavior
lazyBehaviorDescription
Performance 🚀: The lazy behavior of tab panels' content when not active. Only works when `isLazy={true}` - "unmount": The content of inactive tab panels are always unmounted. - "keepMounted": The content of inactive tab panels is initially unmounted, but stays mounted when selected.
Type
LazyModeDefault
"unmount"onChange
onChangeDescription
Callback when the index (controlled or un-controlled) changes.
Type
((index: number) => void)orientation
orientationDescription
The orientation of the tab list.
Type
"horizontal" | "vertical"Default
"horizontal"size
sizeType
"sm" | "md" | "lg"Default
"md"variant
variantType
"line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"Default
"line"Tab Props#
id
idType
stringisDisabled
isDisabledDescription
If true, the Tab won't be toggleable
Type
booleanisSelected
isSelectedType
booleanpanelId
panelIdType
string