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.

    SourceTheme source@chakra-ui/tabs

Props#

Tabs Props#

Tabs composes Box so you call pass all Box related props.

align

Description

The alignment of the tabs

Type
"center" | "end" | "start"

colorScheme

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Default
"blue"

defaultIndex

Description

The initial index of the selected tab (in uncontrolled mode)

Type
number

direction

Description

The writing mode direction. - When in RTL, the left and right navigation is flipped

Type
"ltr" | "rtl"
Default
"ltr"

id

Description

The id of the tab

Type
string

index

Description

The index of the selected tab (in controlled mode)

Type
number

isFitted

Description

If true, tabs will stretch to width of the tablist.

Type
boolean

isLazy

Description

Performance 🚀: If true, rendering of the tab panel's will be deferred until it is selected.

Type
boolean

isManual

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
boolean

lazyBehavior

Description

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
LazyBehavior
Default
"unmount"

onChange

Description

Callback when the index (controlled or un-controlled) changes.

Type
((index: number) => void)

orientation

Description

The orientation of the tab list.

Type
"horizontal" | "vertical"
Default
"horizontal"

size

Type
"sm" | "md" | "lg"
Default
"md"

variant

Type
"line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"
Default
"line"

Tab Props#

id

Type
string

isDisabled

Description

If true, the Tab won't be toggleable

Type
boolean

isSelected

Type
boolean

panelId

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel