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.

colorScheme

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"
Default
blue

size

Description

The size of the Tabs

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

variant

Description

The variant of the Tabs

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

Tab Props#

isDisabled

Description

If true, the Tab won't be toggleable

Type
boolean
Default
false

isFocusable

Description

If true and isDisabled, the Tab will be focusable but not interactive.

Type
boolean
Default
false
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel