Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Tabs

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

Tabs provide a way for users to organize and navigate between sections of content on the same page. Each tab must be paired with a corresponding rh-tab-panel. When using keyboard navigation, arrow keys move focus between tabs following the WAI-ARIA Tabs pattern. The component allows horizontal, vertical, and boxed layouts, and overflow scroll buttons appear when tabs exceed the available width.

import '@rhds/elements/rh-tabs/rh-tabs.js';
 
a {
  color: var(--rh-color-interactive-primary-default);

  &:hover {
    color: var(--rh-color-interactive-primary-hover);
  }

  &:focus-within {
    color: var(--rh-color-interactive-primary-focus);
  }

  &:active {
    color: var(--rh-color-interactive-primary-active);
  }

  &:visited {
    color: var(--rh-color-interactive-primary-visited);

    &:hover {
      color: var(--rh-color-interactive-primary-visited-hover);
    }

    &:focus-within {
      color: var(--rh-color-interactive-primary-visited-focus);
    }

    &:active {
      color: var(--rh-color-interactive-primary-visited-active);
    }
  }
}
 
<rh-tabs>
  <rh-tab id="users" slot="tab" active="">Users</rh-tab>
  <rh-tab-panel>Users</rh-tab-panel>
  <rh-tab slot="tab">Containers</rh-tab>
  <rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
  <rh-tab slot="tab">Database</rh-tab>
  <rh-tab-panel>Database</rh-tab-panel>
  <rh-tab slot="tab">Servers</rh-tab>
  <rh-tab-panel>Servers</rh-tab-panel>
  <rh-tab slot="tab">Cloud</rh-tab>
  <rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>
 
import { Tab } from "@rhds/elements/react/rh-tab/rh-tab.js";
import { TabPanel } from "@rhds/elements/react/rh-tab-panel/rh-tab-panel.js";
import { Tabs } from "@rhds/elements/react/rh-tabs/rh-tabs.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Tabs>
    <Tab id="users" slot="tab" active>Users</Tab>
    <TabPanel>Users</TabPanel>
    <Tab slot="tab">Containers</Tab>
    <TabPanel>Containers<a href="#">Focusable element</a></TabPanel>
    <Tab slot="tab">Database</Tab>
    <TabPanel>Database</TabPanel>
    <Tab slot="tab">Servers</Tab>
    <TabPanel>Servers</TabPanel>
    <Tab slot="tab">Cloud</Tab>
    <TabPanel>Cloud</TabPanel>
  </Tabs>
);

Accessible label for the scroll-left overflow button. Authors should localize this string for non-English pages.

Accessible label for the scroll-right overflow button. Authors should localize this string for non-English pages.

When true, tabs use manual activation, requiring the user to press Enter or click to activate a focused tab. When false (default), tabs use automatic activation, where focus immediately selects the tab.

Zero-based index of the currently active tab. Setting this property programmatically selects the tab at that index. Defaults to -1 (no tab selected).

Sets the color palette for child components, overriding any inherited context from parent elements.

When true, centers the tab list within the container. Authors should avoid centering when there are many tabs, as it may cause layout issues with overflow.

Sets the tab style to boxed (box) or boxed with inset padding (inset). When unset, tabs use the default open style.

When true, displays the tab list vertically to the left of the panels. On small viewports (below 768px), vertical tabs revert to horizontal layout.

 View source on GitHub

Status

When to use

  • When you need to group related information into different categories
  • When users need to read sections of content in the same view without leaving the page
  • When you need to group other types of content in the same view like forms, settings, dashboards, etc.

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify