React Tabs component - Joy UI

进入原网站导航首页

React Tabs component - Joy UISkip to content🚀 Influence MUI's 2026 roadmap! Take our latest Developer SurveySearch…

Joy UIv5.0.0-beta.49Getting started ComponentsInputsAutocomplete Button Button Group Checkbox Input Radio Button Select Slider Switch Textarea Text Field Toggle Button GroupData displayAspect Ratio Avatar Badge Chip Divider List Table Tooltip TypographyFeedbackAlert Circular Progress Linear Progress Modal Skeleton SnackbarSurfacesAccordion Card SheetNavigationBreadcrumbs Drawer Link Menu Stepper TabsLayoutBox Grid StackUtilsCSS Baseline APIs Customization Integrations Migration + Tabs

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

Feedback Bundle size WAI-ARIA FigmaIntroduction

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. Tab ATab BTab CContent of Tab A

Tabs>
TabList>
Tab
variant="plain"
color="neutral">...Tab>
TabList>
TabPanel>...TabPanel>
Tabs>

PlaygroundSelected tab variantplainoutlinedsoftsolidSelected tab colorprimaryneutraldangersuccesswarningsizesmmdlgorientationhorizontalverticalDisable TabList underlineTab indicator insetDisable Tab indicatorBasics

import Tabs from '@mui/joy/Tabs';
import TabList from '@mui/joy/TabList';
import Tab from '@mui/joy/Tab';

CopyCopied(or $keyC)

The Joy UI set of Tabs components follows the WAI ARIA design pattern guidelines.

Use the value prop on the Tab Panel and the defaultValue prop on the Tabs component to target the selected tab.

First tabSecond tabThird tabFirst tab panel

Tabs aria-label="Basic tabs" defaultValue={0}>
TabList>
Tab>First tabTab>
Tab>Second tabTab>
Tab>Third tabTab>
TabList>
TabPanel value={0}>
b>Firstb> tab panel
TabPanel>
TabPanel value={1}>
b>Secondb> tab panel
TabPanel>
TabPanel value={2}>
b>Thirdb> tab panel
TabPanel>
Tabs>

First tab Second tab Third tab First tab panel Second tab panel Third tab panel Press Enter to start editingDisabled tab

Use the disabled prop to disable interaction and focus.

First tabSecond tabThird tab

Tabs aria-label="Disabled tabs" defaultValue={0}>
TabList>
Tab>First tabTab>
Tab disabled>Second tabTab>
Tab>Third tabTab>
TabList>
Tabs>

First tab Second tab Third tab Press Enter to start editingCustomizationVariants

The and components accept the global variant prop values.

First tabSecond tabThird tabFirst tabSecond tabThird tabFirst tabSecond tabThird tabVertical

Use the orientation="vertical" prop on the component to make it vertical. Keyboard navigation using arrow keys adapts automatically.

First tabSecond tabThird tabFirst tab panelIndicator placement

Use the underlinePlacement prop on the Tab List component to change the placement of the underline border on the Tabs.

TopRightBottomLeftunderlinePlacement Top

Control the selected Tab indicator independently using the indicatorPlacement prop.

TopRightBottomLeftIndicatorPlacement Top

Depending on the placement of the underline and the selected indicator, you may need to change the flex direction of the Tabs component.

Flex directionPlacementTab ATab BTab CContent of Tab ASticky

Use the sticky prop to anchor the Tab List component at the top or bottom. This is ideal for use cases that involve longer content.

Sticky topSticky bottomLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentLong contentTab flex

Use the tabFlex prop on the Tab List component to make the Tab elements fill the available space, as shown in the example below.

In the first demo, the Tab elements fill the available space using tabFlex={1}. In the second demo, the Tab elements fill the available space equally using tabFlex="auto", but the width of each respective element is based on its content. First tabExample of a very long tab labelThird tabFirst tabExample of a very long tab labelThird tabIcon

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

Tabs aria-label="Icon tabs" defaultValue={0}>
TabList>
Tab>
PhoneIcon />
Tab>
Tab>
FavoriteIcon />
Tab>
Tab>
PersonPinIcon />
Tab>
TabList>
Tabs>

Press Enter to start editingRecentsFavoriteNearbyRecentsFavoriteNearbyScrollable tabs

Add the overflow: auto property to the Tab List component to make the tabs scrollable.

Polish it further by hiding the scrollbar with '&::-webkit-scrollbar': { display: 'none' }, and snapping the scroll to the edge of the Tab List component with CSS scroll snap properties.

Tab #1Tab #2Tab #3Tab #4Tab #5Tab #6Tab #7Tab #8Tab #9Tab #10Tab #11Tab #12Tab #13Tab #14Tab #15Tab #16Tab #17Tab #18Tab #19Tab #20

Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
TabList
sx={{
overflow: 'auto',
scrollSnapType: 'x mandatory',
'&::-webkit-scrollbar': { display: 'none' },
}}
>
{[...Array(20)].map((_, index) => (
Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
Tab #{index + 1}
Tab>
))}
TabList>
Tabs>

{[...Array(20)].map((_, index) => ( Tab #{index + 1} ))} Press Enter to start editingCSS variables playground

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 ATab BTab CTab A content

Tabs >

CSS variables

--Tabs-spacingpxControls TabList's gap and TabPanel's padding.--Tab-indicatorThicknesspx--Tab-indicatorSizepx--Tab-indicatorRadiuspxCommon examplesSegmented controls

To mimic the segmented controls of iOS, add a border-radius to the Tab List component and set the selected Tab background to background.surface.

FeatureSpecificationsReviewSupportBrowser tabs

In this example, the Tab's variant prop is set to outlined and the indicator is moved to the top via indicatorPlacement="top". The borders are then set to transparent based on the selected state.

Google SearchXDribbbleReactPricing tabs

This example removes the background of the selected Tab by targeting the aria-selected="true" attribute.

CommunityProPremium

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

$0 － Free forever

Centered tabs

To center the Tab components in the Tab List, add the flex: initial property to override the default flex-grow behavior. Then, on the list, add justifyContent: center.

Deals 14Library 20Products 8DealsMobile bottom navigation

In this example, each Tab is painted with a color from the theme when selected.

HomeLikesSearchProfileAccessibility

To ensure proper accessibility, the WAI-ARIA Authoring Practices recommends associating a label with the Tabs component. There are two options to accomplish this:

Using the id attribute

Add a text element close to the tabs with the id attribute. Then add the aria-labelledby attribute to the Tabs component. Make sure to use meaningful labels for both.

Typography id="tabs-accessibility-label">Meaningful labelTypography>
Tabs aria-labelledby="tabs-accessibility-label">...Tabs>

CopyCopied(or $keyC) Using aria-label

If a text element does not accompany your Tabs component, use the aria-label attribute directly to make it readable by screen readers.

Tabs aria-label="Meaningful label">...Tabs>

CopyCopied(or $keyC) API

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

Edit this page

Was this page helpful?

Stepper Box

•

Blog

•

Store

Contents

Introduction Basics Disabled tab Customization Variants Vertical Indicator placement Sticky Tab flex Icon Scrollable tabs CSS variables playground Common examples Segmented controls Browser tabs Pricing tabs Centered tabs Mobile bottom navigation Accessibility Using the id attribute Using aria-label API Become a Diamond sponsor MUI stands in solidarity with Ukraine.Search…

React Tabs component - Joy UI,AI智能索引,全网链接索引,智能导航,网页索引

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