Tabs

InstallationCopy Anchor Link

UsageCopy Anchor Link

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function RequestTabs() {
  return (
    <Tabs defaultValue="details">
      <TabsList aria-label="Request sections">
        <TabsTrigger value="details">Details</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="history">History</TabsTrigger>
      </TabsList>
      <TabsContent value="details">Applicant name, service and submission date.</TabsContent>
      <TabsContent value="documents">Two files attached.</TabsContent>
      <TabsContent value="history">Submitted on 4 November 2026.</TabsContent>
    </Tabs>
  );
}

Use Tabs to split one page into parts that belong together and are read one at a time: the details, documents and history of a request. Tabs do not change the page: for moving between pages use links or a navigation menu. Tabs are not steps; use a stepper for a sequence. Every TabsTrigger needs a value, and the TabsContent with the same value is its panel. Give the list an aria-label if the page has more than one.

AnatomyCopy Anchor Link

• List (role="tablist"): the row of tabs, with a 3px divider under it (divider). It scrolls sideways when the tabs do not fit.
• Tab (role="tab"): an optional icon and a label. The selected tab is bold with a 3px bar in border-primary.
• Panel (role="tabpanel"): the content of the selected tab.

ExamplesCopy Anchor Link

Sizes and iconsCopy Anchor Link

size is sm, md (default) or lg. Put an icon before the label. A disabled tab can be reached with the arrow keys but not selected.

VerticalCopy Anchor Link

orientation="vertical" puts the list beside the panel, with the bar on the end side. Up and Down move between tabs.

BehaviourCopy Anchor Link

By default an arrow key moves focus and selects the tab. Set activateOnFocus={false} on TabsList for manual activation: arrows only move focus, and Enter or Space selects. divider={false} removes the line under the list, flush removes its side padding, and value with onValueChange makes the selection yours to control.

RTLCopy Anchor Link

The list starts on the right, and the Left and Right arrows swap: in Arabic, Left moves to the next tab. The components read the direction from <html dir> themselves, so you do not wrap them in a provider.

AccessibilityCopy Anchor Link

• Built on Base UI Tabs: role="tablist", tab and tabpanel, with aria-selected, aria-controls and aria-orientation. Only the selected tab is in the tab order (roving focus).
• A tab opens its panel as soon as it gets focus. The panel itself is focusable, so keyboard users can reach content that has no focusable control.
• The selected tab is shown by bold text and a bar, not colour alone. Text is 4.5:1, icons and the bar 3:1 or better, on every surface, in light and dark. Focus is a 2px outline inside the tab.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• The More tab (an overflow menu on horizontal tabs) is not built. A list that does not fit scrolls sideways instead; for an overflow menu, put a Menu in the last tab.
• Vertical tabs also show a neutral bar on hover and press (as in the DGA CSS); every tab shows the primary bar when selected.

ContrastCopy Anchor Link