clickOnEnter
Description
Whether or not trigger click on pressing Enter.
Type
booleanDefault
trueTabs
Tabs is a component for switching between different display areas.
Props
TabProps
clickOnSpace
Description
Whether or not trigger click on pressing Space.
Type
booleanDefault
truedisableTouchBehavior
Description
Disable the touch device behavior.
Type
booleanDefault
truefocusable
Description
If true and isDisabled, the element will have only aria-disabled set to true.
Type
booleanDefault
falsefocusOnClick
Description
Whether or not to focus the element when it is clicked.
If true, the element will receive focus upon click.
Type
booleanDefault
trueisDisabled
DeprecatedDescription
If true, the element will be disabled. It will set the disabled HTML attribute.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisFocusable
DeprecatedDescription
If true and isDisabled, the element will have only aria-disabled set to true.
Deprecated
Use focusable instead.
Type
booleanDefault
falseref
Description
The ref for the element.
Type
type ONLY_FOR_FORMAT =
| ((instance: HTMLButtonElement | null) => void)
| RefObject<HTMLButtonElement>TabListProps
TabPanelProps
TabPanelsProps
TabsProps
align
Description
The alignment of the tabs.
Type
"center" | "end" | "start"colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Default
"primary"defaultIndex
Description
The index of the selected tab.
Type
numberdisableRipple
Description
If true, disable ripple effects when pressing the tab.
Type
booleanDefault
falsefitted
Description
If true, tabs will stretch to width of the tablist.
Type
booleanDefault
falseindex
Description
The index of the selected tab.
Type
numberisFitted
DeprecatedDescription
If true, tabs will stretch to width of the tablist.
Deprecated
Use fitted instead.
Type
booleanDefault
falseisLazy
DeprecatedDescription
If true, rendering of the tab panel's will be deferred until it is selected.
Deprecated
Use lazy instead.
Type
booleanDefault
trueisManual
DeprecatedDescription
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.
Deprecated
Use manual instead.
Type
booleanDefault
falselazy
Description
If true, rendering of the tab panel's will be deferred until it is selected.
Type
booleanDefault
truelazyBehavior
Description
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'manual
Description
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
booleanDefault
falseonChange
Description
The callback invoked when the index changes.
Type
(index: number) => voidorientation
Description
The orientation of the tab list.
Type
"horizontal" | "vertical"Default
'horizontal'size
Description
The size of the Tabs.
Type
"sm" | "md" | "lg"Default
"md"tabListProps
Description
Props for tab list component.
Type
TabListPropstabPanelsProps
Description
Props for tab panels components.
Type
TabPanelsPropsvariant
Description
The variant of the Tabs.
Type
"line" | "rounded" | "rounded-solid" | "rounded-subtle" | "sticky" | "sticky-solid" | "sticky-subtle" | "unstyled"Default
"line"Edit this page on GitHub