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
truefocusOnClick
Description
Whether or not to focus the element when it is clicked.
If true, the element will receive focus upon click.
Type
booleanDefault
trueisDisabled
Description
If true, the element will be disabled. It will set the disabled HTML attribute.
Type
booleanDefault
falseisFocusable
Description
If true and isDisabled, the element will have only aria-disabled set to true.
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
falseindex
Description
The index of the selected tab.
Type
numberisFitted
Description
If true, tabs will stretch to width of the tablist.
Type
booleanDefault
falseisLazy
Description
If true, rendering of the tab panel's will be deferred until it is selected.
Type
booleanDefault
trueisManual
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
falselazyBehavior
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'onChange
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