Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

Tabs

Tabs make it easy to explore and switch between different views.

Introduction

Joy UI provides four tabs-related components:

  • Tabs: A context provider that synchronizes the selected Tab with the corresponding TabPanel.
  • TabList: A container that consists of Tab items.
  • Tab: A button to toggle a selected tab.
  • TabPanel: A pane that displays on the screen when its value matches with the selected tab.
<Tabs>
  <TabList variant="outlined" color="neutral">
    <Tab>...</Tab>
  </TabList>
</Tabs>

Playground

Component

After installation, you can start building with this component using the following basic elements:

<span class="token keyword">import</span> Tabs <span class="token keyword">from</span> <span class="token string">'@mui/joy/Tabs'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> TabList <span class="token keyword">from</span> <span class="token string">'@mui/joy/TabList'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Tab <span class="token keyword">from</span> <span class="token string">'@mui/joy/Tab'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Tabs</span></span> <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TabList</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Tab</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Tab <span class="token constant">A</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Tab</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Tab</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Tab <span class="token constant">B</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Tab</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Tab</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Tab <span class="token constant">C</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Tab</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">TabList</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Tabs</span></span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Basic usage

The tabs structure follows WAI ARIA design pattern. To target the initially selected tab, specify the value prop to the TabPanel and use Tabs's defaultValue.

First tab panel
Press Enter to start editing

Variants

Both TabList and Tab accept global variant values, so you can mix and match to get the desired result.

Disabled tab

To disable a tab, use the disabled prop on the Tab component.

Press Enter to start editing

Vertical

To set the tabs orientation to vertical, use the orientation="vertical" on the Tabs component. Keyboard navigation (e.g. arrow keys) will adapt automatically to the used orientation.

First tab panel

Icon

Since TabList uses the same style as the List component, you can use the icon directly as a child or use ListItemDecorator with a text.

Press Enter to start editing

Accessibility

For ensuring proper accessibility, it's recommended by ARIA Authoring Practices Guide to associate a label to the Tabs component. To do that, there are two options:

Option one

Render a text element with an id and provide aria-labelledby="$is"to the Tabs component.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Typography</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabs-accessibility-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Meaningful label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Typography</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Tabs</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabs-accessibility-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Tabs</span></span><span class="token punctuation">></span></span>

Option two

When not displaying a text element on the screen, use aria-label directly on the Tabs component. Screen readers will then properly announce the label.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Tabs</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Meaningful label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Tabs</span></span><span class="token punctuation">></span></span>

CSS Variables

Play around with all the CSS variables available in the slider component to see how the design changes.

You can use those to customize the component on both the sx prop and the theme.

Tab A content
<Tabs >

CSS Variables

px

Controls TabList's gap and TabPanel's padding.

Common examples

Underlined tabs

Pricing tabs

Get started with the industry-standard React UI library, MIT-licensed.

$0 － Free forever

With counter chips

Deals panel

Mobile bottom navigation

Unstyled

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.