Tabs: Disabled

Disabled tabs are skipped by the keyboard.

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

export function TabsDisabled() {
  return (
    <Tabs defaultValue="day">
      <TabsList>
        <TabsTrigger value="day">Day</TabsTrigger>
        <TabsTrigger value="week">Week</TabsTrigger>
        <TabsTrigger value="month" disabled>
          Month
        </TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Add this example

This adds the example as components/examples/tabs/disabled.tsx, together with the Tabs component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/tabs-disabled.json

To add only the component, follow the Tabs installation.

Props in this example

The Tabs props this example sets, from the API reference.

Tabs

Prop	Type	Default
`defaultValue`	`any`	`0`

TabsTrigger

Prop	Type	Default
`value`	`any`	`–`
`disabled`	`boolean`	`false`

Every prop is in the Tabs API reference.

More Tabs examples

See them all, with keyboard support and accessibility notes, on the Tabs page.