Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Tabs

Used to display content in a tabbed interface

SourceStorybookRecipeArk
AI TipWant to skip the docs? Use the MCP Server
Manage your team members

Usage

import { Tabs } from "@chakra-ui/react"
<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

Examples

Variants

Use the variant prop to change the visual style of the tabs.

Manage your team members
Manage your team members
Manage your team members
Manage your team members
Manage your team members

Lazy Mounted

Use the lazyMount and/or unmountOnExit prop to only render the tab content when it is active. This can be useful for performance optimization.

Tab 1: Content 0

Indicator

Render the Tabs.Indicator component to display a visual indicator of the active tab.

Manage your team members

Custom Indicator

Customize the indicator appearance using CSS variables like --tabs-indicator-bg and --tabs-indicator-shadow.

Manage your team members

Pass the asChild to the Tabs.Trigger component to render a link as a tab. When a tab is clicked, the link will be navigated to.

MembersProjects
Manage your team members

When using custom router links, you need to set the navigate prop on the Tabs.Root component.

"use client"

import { Tabs } from "@chakra-ui/react"
import { useNavigate } from "react-router-dom"

const Demo = () => {
  const navigate = useNavigate()
  return (
    <Tabs.Root navigate={({ value, node }) => navigate(`/${value}`)}>
      {/* ... */}
    </Tabs.Root>
  )
}

Fitted

Use the fitted prop to make the tabs fit the width of the container.

Controlled

Use the value and onValueChange prop to control the active tab.

First panel

Store

An alternative way to control the tabs is to use the RootProvider component and the useTabs store hook.

This way you can access the tabs state and methods from outside the tabs.

selected: members
Manage your team members

Disabled Tab

Set the disabled prop on the Tabs.Trigger component to disable a tab.

Manual activation

By default, the tabs are selected when the arrow keys are pressed. Disable this behavior by setting the activationBehavior prop to manual.

In this mode, the tabs will only be selected when clicked or the enter key is pressed.

Dynamic

Here's an example of how to dynamically add and remove tabs.

Tab Content 1

Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit.

Responsive Orientation

Responsive values are not supported for the orientation prop because it affects keyboard navigation and aria-orientation behavior, not just styling. The orientation changes how arrow keys work (horizontal uses left/right, vertical uses up/down).

To achieve responsive orientation, use the useBreakpointValue hook to change the orientation based on the screen size.

Manage your team members and their roles here.

Animation

Use the _open and _close conditional props to animate the tabs.

Dolore ex esse laboris elit magna esse sunt

Props

Root

PropDefaultType
activationMode 'automatic'
'manual' | 'automatic'

The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus

lazyMount false
boolean

Whether to enable lazy mounting

loopFocus true
boolean

Whether the keyboard navigation will loop from last tab to first, and vice versa.

orientation 'horizontal'
'horizontal' | 'vertical'

The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.

unmountOnExit false
boolean

Whether to unmount on exit.

colorPalette gray
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

size md
'sm' | 'md' | 'lg'

The size of the component

variant line
'line' | 'subtle' | 'enclosed' | 'outline' | 'plain'

The variant of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

composite
boolean

Whether the tab is composite

defaultValue
string

The initial selected tab value when rendered. Use when you don't need to control the selected tab value.

deselectable
boolean

Whether the active tab can be deselected when clicking on it.

id
string

The unique identifier of the machine.

ids
Partial<{ root: string; trigger: string; list: string; content: string; indicator: string }>

The ids of the elements in the tabs. Useful for composition.

navigate
(details: NavigateDetails) => void

Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.

onFocusChange
(details: FocusChangeDetails) => void

Callback to be called when the focused tab changes

onValueChange
(details: ValueChangeDetails) => void

Callback to be called when the selected/active tab changes

translations
IntlTranslations

Specifies the localized strings that identifies the accessibility elements and their states

value
string

The controlled selected tab value

fitted
'true' | 'false'

The fitted of the component

justify
'start' | 'center' | 'end'

The justify of the component

Trigger

PropDefaultType
as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Content

PropDefaultType
as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Explorer

Explore the Tabs component parts interactively. Click on parts in the sidebar to highlight them in the preview.

Manage your team members

Component Anatomy

Hover to highlight, click to select parts

root

trigger

list

content

contentGroup

indicator

tabs.recipe.ts

Previous

Steps

Next

Alert