Tabs

Demos

Default pill tabs.

Latest reading is within range.

"use client"

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

export function TabsDemo() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="history">History</TabsTrigger>
        <TabsTrigger value="notes">Notes</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Latest reading is within range.</TabsContent>
      <TabsContent value="history">Three panels in the last year.</TabsContent>
      <TabsContent value="notes">Collected after a 10 hour fast.</TabsContent>
    </Tabs>
  )
}

Usage

Use tabs to switch between views of the same subject, such as the overview, history, and notes of one biomarker. Do not use tabs for steps in a sequence, or for content the reader needs to compare at once.

Import it from @workspace/ui/components/tabs.

Anatomy

Tabs — Holds the active value and the orientation.
TabsList — The row of triggers. variant sets the style.
TabsTrigger — One tab. Its value matches a panel.
TabsContent — The panel shown when its tab is active.

Notes

Arrow keys move between tabs. Tab moves into the active panel.
Keep labels to one or two words.
Line tabs are quieter. Use them when tabs sit inside a busy page.
tabsListVariants is exported to style other elements like a tab list.

Examples

Line

Set variant="line" on TabsList for a quieter style.

Line tabs keep the page quieter.

"use client"

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

export function TabsLine() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="history">History</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Line tabs keep the page quieter.</TabsContent>
      <TabsContent value="history">Earlier panels stay one click away.</TabsContent>
    </Tabs>
  )
}

Vertical

Set orientation="vertical" to stack the tabs beside the content.

Latest reading is within range.

"use client"

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

export function TabsVertical() {
  return (
    <Tabs orientation="vertical" defaultValue="overview" className="w-full max-w-md">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="history">History</TabsTrigger>
        <TabsTrigger value="notes">Notes</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Latest reading is within range.</TabsContent>
      <TabsContent value="history">Three panels in the last year.</TabsContent>
      <TabsContent value="notes">Collected after a 10 hour fast.</TabsContent>
    </Tabs>
  )
}

Disabled

Disable a tab that has nothing to show yet.

Trends appear after your second panel.

"use client"

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

export function TabsDisabled() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="trends" disabled>
          Trends
        </TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Trends appear after your second panel.</TabsContent>
    </Tabs>
  )
}

Controlled

Hold the active tab with value and onValueChange.

Latest reading is within range.

Active tab: overview

"use client"

import * as React from "react"

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

export function TabsControlled() {
  const [tab, setTab] = React.useState("overview")

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Tabs value={tab} onValueChange={setTab}>
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="history">History</TabsTrigger>
          <TabsTrigger value="notes">Notes</TabsTrigger>
        </TabsList>
        <TabsContent value="overview">Latest reading is within range.</TabsContent>
        <TabsContent value="history">Three panels in the last year.</TabsContent>
        <TabsContent value="notes">Collected after a 10 hour fast.</TabsContent>
      </Tabs>
      <p className="text-muted-foreground text-xs">Active tab: {tab}</p>
    </div>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Prop	Type	Default	Description
`defaultValue`	`any`	`0`	Active tab on first render.
`value`	`any`	—	Active tab when controlled.
`onValueChange`	`(value) => void`	—	Called when the active tab changes.
`orientation`	`"horizontal" or "vertical"`	`horizontal`	Direction of the list.

TabsList

Prop	Type	Default	Description
`variant`	`"default" or "line"`	`default`	Filled pill track or an outlined track.

TabsTrigger

Prop	Type	Default	Description
`value`	`any`	—	Identifies the tab and its panel.
`disabled`	`boolean`	`false`	Stops the tab from being selected.