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.

Installation

Install the component from your command line.

npm install @radix-ui/react-tabs

npm install @radix-ui/react-tabs

Anatomy

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>
);

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

Basic example

Create your styled tabs component from the primitive parts.

One

Two

Three

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>
);

// 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>
);

API Reference

Root

Contains all the tabs component parts.

Prop	Type	Default
`as`	`enum`	`div`
`defaultValue`	`string`
`value`	`string`
`onValueChange`	`function`
`orientation`	`enum`	`"horizontal"`
`activationMode`	`enum`	`"automatic"`

List

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

Prop	Type	Default	Required
`as`	`enum`	`div`
`loop`	`boolean`	`true`

Tab

The button that activates its associated panel.

Prop	Type	Default
`as`	`enum`	`div`
`value`	`string`
`disabled`	`boolean`	`false`

Panel

Contains the content associated with each tab.

Prop	Type	Default	Required
`as`	`enum`	`div`
`value`	`string`

Examples

Vertical

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

One

Two

Three

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>
);

// 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>
);

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Tab`	When focus moves onto the tabs, focuses the active tab. When a tab contains focus, moves focus to the active panel.
`ArrowDown`	Moves focus to the next tab depending on `orientation` and activates its associated panel.
`ArrowRight`	Moves focus to the next tab depending on `orientation` and activates its associated panel.
`ArrowUp`	Moves focus to the previous tab depending on `orientation` and activates its associated panel.
`ArrowLeft`	Moves focus to the previous tab depending on `orientation` and activates its associated panel.
`Home`	Moves focus to the first tab and activates its associated panel.
`End`	Moves focus to the last tab and activates its associated panel.