Tabs

A set of layered sections of content—known as tab panels—that display one panel of content at a time.

Features

  • Can be controlled or uncontrolled.
  • Supports horizontal/vertical orientation.
  • Supports automatic/manual activation.
  • Full keyboard navigation.

Install the component from your command line.

npm install @radix-ui/react-tabs

Import the components and piece the parts together.

import * as Tabs from '@radix-ui/react-tabs';
export default () => (
<Tabs.Root>
<Tabs.List>
<Tabs.Tab />
</Tabs.List>
<Tabs.Panel />
</Tabs.Root>
);

Create your styled tabs component from the primitive parts.

Tab one content
import { styled } from 'path-to/stitches.config';
import * as Tabs from '@radix-ui/react-tabs';
const StyledTabs = styled(Tabs.Root, {
display: 'flex',
flexDirection: 'column',
});
const StyledList = styled(Tabs.List, {
flexShrink: 0,
display: 'flex',
borderBottom: '1px solid gainsboro',
});
const StyledTab = styled(Tabs.Tab, {
flexShrink: 0,
padding: '10px 20px',
color: 'slategray',
userSelect: 'none',
'&:hover': { color: 'black' },
'&[data-state="active"]': {
color: 'black',
boxShadow:
'inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor',
},
});
const StyledPanel = styled(Tabs.Panel, {
flexGrow: 1,
padding: 20,
});
export default () => (
<StyledTabs defaultValue="tab1">
<StyledList aria-label="tabs example">
<StyledTab value="tab1">One</StyledTab>
<StyledTab value="tab2">Two</StyledTab>
<StyledTab value="tab3">Three</StyledTab>
</StyledList>
<StyledPanel value="tab1">Tab one content</StyledPanel>
<StyledPanel value="tab2">Tab two content</StyledPanel>
<StyledPanel value="tab3">Tab three content</StyledPanel>
</StyledTabs>
);

Contains all the tabs component parts.

PropTypeDefault
asenumdiv
defaultValuestringNo default value
valuestringNo default value
onValueChangefunctionNo default value
orientationenum"horizontal"
direnum"ltr"
activationModeenum"automatic"

Contains the tabs aligned along the edge of the active panel.

PropTypeDefault
asenumdiv
loopbooleantrue

The button that activates its associated panel.

PropTypeDefault
asenumdiv
value*stringNo default value
disabledbooleanfalse

Contains the content associated with each tab.

PropTypeDefault
asenumdiv
value*stringNo default value

You can create a vertical tab by using the orientation prop.

Tab one content
import { styled } from 'path-to/stitches.config';
import * as Tabs from '@radix-ui/react-tabs';
const StyledTabs = styled(Tabs.Root, {
display: 'flex',
});
const StyledList = styled(Tabs.List, {
flexShrink: 0,
flexDirection: 'column',
display: 'flex',
borderRight: '1px solid gainsboro',
});
const StyledTab = styled(Tabs.Tab, {
flexShrink: 0,
padding: '10px 20px',
color: 'slategray',
userSelect: 'none',
'&:hover': { color: 'black' },
'&[data-state="active"]': {
color: 'black',
boxShadow: 'inset -1px 0 0 currentColor, 1px 0 0 currentColor',
},
});
const StyledPanel = styled(Tabs.Panel, {
flexGrow: 1,
padding: 20,
});
export default () => (
<StyledTabs defaultValue="tab1" orientation="vertical">
<StyledList aria-label="tabs example">
<StyledTab value="tab1">One</StyledTab>
<StyledTab value="tab2">Two</StyledTab>
<StyledTab value="tab3">Three</StyledTab>
</StyledList>
<StyledPanel value="tab1">Tab one content</StyledPanel>
<StyledPanel value="tab2">Tab two content</StyledPanel>
<StyledPanel value="tab3">Tab three content</StyledPanel>
</StyledTabs>
);

Adheres to the Tabs WAI-ARIA design pattern.

KeyDescription
TabWhen focus moves onto the tabs, focuses the active tab. When a tab contains focus, moves focus to the active panel.
ArrowDownMoves focus to the next tab depending on orientation and activates its associated panel.
ArrowRightMoves focus to the next tab depending on orientation and activates its associated panel.
ArrowUpMoves focus to the previous tab depending on orientation and activates its associated panel.
ArrowLeftMoves focus to the previous tab depending on orientation and activates its associated panel.
HomeMoves focus to the first tab and activates its associated panel.
EndMoves focus to the last tab and activates its associated panel.