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.
The Tabs
component is a multipart component. The styling needs to be applied
to each part specifically.
To learn more about styling multipart components, visit the Component Style page.
Anatomy#
- A:
root
- B:
tab
- C:
tablist
- D:
tabpanels
- E:
tabpanel
Theming properties#
The properties that affect the theming of the Tabs
component are:
variant
: The visual variant of the component. Defaults toline
.size
: The size of the component. Defaults tomd
.colorScheme
: The color scheme of the component. Defaults toblue
.
Theming utilities#
createMultiStyleConfigHelpers
: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle
anddefineMultiStyleConfig
).definePartsStyle
: a function used to create multipart style objects.defineMultiStyleConfig
: a function used to define the style configuration for a multipart component.
import { tabsAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(tabsAnatomy.keys)
Customizing the default theme#
import { tabsAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@chakra-ui/react'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(tabsAnatomy.keys)// define the base component stylesconst baseStyle = definePartsStyle({// define the part you're going to styletab: {fontWeight: 'semibold', // change the font weight},tabpanel: {fontFamily: 'mono', // change the font family},})// export the component themeexport const tabsTheme = defineMultiStyleConfig({ baseStyle })
After customizing the the Tabs
theme, we can import it in our theme file and
add it in the components
property.
import { extendTheme } from '@chakra-ui/react'import { tabsTheme } from './components/Tabs'const theme = extendTheme({components: {Tabs: tabsTheme,},})export default theme
Adding a custom size#
Let's assume we want to include an extra large tab size. Here's how we can do that:
import { tabsAnatomy } from '@chakra-ui/anatomy';import { createMultiStyleConfigHelpers } from '@chakra-ui/react';const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(tabsAnatomy.keys);// define custom sizesconst sizes = {xl: definePartsStyle({// define the parts that will change for each sizetab: {fontSize: 'xl',py: '4',px: '6',},tabpanel: {py: '4',px: '6',},}),};// export the component themeexport const tabsTheme = defineMultiStyleConfig({ sizes });// now we can use the new `xl` size<Tabs size="xl" ... />
Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.
Adding a custom variant#
Let's assume we want to include a custom variant that is fully enclosed and can have a color scheme applied. Here's how we can do that:
import { tabsAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@chakra-ui/react'import { mode } from '@chakra-ui/theme-tools' // import utility to set light and dark mode props// define a custom variantconst colorfulVariant = definePartsStyle((props) => {const { colorScheme: c } = props // extract colorScheme from component propsreturn {tab: {border: '2px solid',borderColor: 'transparent',// use colorScheme to change background color with dark and light mode optionsbg: mode(`${c}.300`, `${c}.600`)(props),borderTopRadius: 'lg',borderBottom: 'none',_selected: {bg: mode('#fff', 'gray.800')(props),color: mode(`${c}.500`, `${c}.300`)(props),borderColor: 'inherit',borderBottom: 'none',mb: '-2px',},},tablist: {borderBottom: '2x solid',borderColor: 'inherit',},tabpanel: {border: '2px solid',borderColor: 'inherit',borderBottomRadius: 'lg',borderTopRightRadius: 'lg',},}})const variants = {colorful: colorfulVariant,}// export the component themeexport const tabsTheme = defineMultiStyleConfig({ variants })// now we can use the `colorful` variant with a different color Scheme<Tabs variant="colorful" colorPalette="purple" ... />
Changing the default properties#
Let's assume we want to change the default size, variant, and color scheme of every tab in our app. Here's how we can do that:
import { tabsAnatomy } from '@chakra-ui/anatomy';import { createMultiStyleConfigHelpers } from '@chakra-ui/react';// define which sizes, variants, and color schemes are applied by defaultconst defaultProps = {size: 'xl',variant: 'colorful',colorScheme: 'green',};// export the component themeexport const tabsTheme = defineMultiStyleConfig({ defaultProps })// This saves you time, instead of manually setting the// size and variant every time you use a tabs component:<Tabs size="xl" variant="colorful" colorPalette="green" ... />
Showcase#
import React from 'react'; import { ChakraProvider, Box, SimpleGrid, GridItem, Tabs, TabList, TabPanels, Tab, TabPanel, } from '@chakra-ui/react'; import theme from './theme'; import { ColorModeSwitcher } from './ColorModeSwitcher'; export default function App() { return ( <ChakraProvider theme={theme}> <Box position="relative" h="100vh" p={12}> <SimpleGrid columns={[1, 1, 1, 2]} spacing={12}> <GridItem> <Tabs> <TabList> <Tab>One</Tab> <Tab>Two</Tab> <Tab>Three</Tab> <Tab isDisabled>Disabled</Tab> </TabList> <TabPanels> <TabPanel> <p>New default appearance defined by theme</p> </TabPanel> <TabPanel> <p>Tab panel two</p> </TabPanel> <TabPanel> <p>Tab panel three</p> </TabPanel> </TabPanels> </Tabs> </GridItem> <GridItem> <Tabs size="lg" colorScheme="purple"> <TabList> <Tab>One</Tab> <Tab>Two</Tab> <Tab>Three</Tab> <Tab isDisabled>Disabled</Tab> </TabList> <TabPanels> <TabPanel> <p>Large size with purple color scheme</p> </TabPanel> <TabPanel> <p>Tab panel two</p> </TabPanel> <TabPanel> <p>Tab panel three</p> </TabPanel> </TabPanels> </Tabs> </GridItem> <GridItem> <Tabs size="md" colorScheme="cyan"> <TabList> <Tab>One</Tab> <Tab>Two</Tab> <Tab>Three</Tab> <Tab isDisabled>Disabled</Tab> </TabList> <TabPanels> <TabPanel> <p>Medium size with cyan color scheme</p> </TabPanel> <TabPanel> <p>Tab panel two</p> </TabPanel> <TabPanel> <p>Tab panel three</p> </TabPanel> </TabPanels> </Tabs> </GridItem> <GridItem> <Tabs size="sm" colorScheme="orange"> <TabList> <Tab>One</Tab> <Tab>Two</Tab> <Tab>Three</Tab> <Tab isDisabled>Disabled</Tab> </TabList> <TabPanels> <TabPanel> <p>Small size with orange color scheme</p> </TabPanel> <TabPanel> <p>Tab panel two</p> </TabPanel> <TabPanel> <p>Tab panel three</p> </TabPanel> </TabPanels> </Tabs> </GridItem> </SimpleGrid> <ColorModeSwitcher /> </Box> </ChakraProvider> ); }