◇

Tabs

4 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@robonen/primitives/tabs';

<TabsRoot>
  <TabsList />
  <TabsTrigger />
  <TabsContent />
</TabsRoot>

API Reference

TabsRoot

Root

Prop	Type	Default	Description
`defaultValue`?	`string`	—	Uncontrolled initial value.
`orientation`?	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the tab list.
`dir`?	`RovingDirection`	`'ltr'`	Writing direction.
`loop`?	`boolean`	`true`	Wrap keyboard navigation.
`disabled`?	`boolean`	—	Disable all tabs.
`activationMode`?	`'automatic' \| 'manual'`	`'automatic'`	How tabs are activated.

TabsList

List

No props or events — renders its element and forwards attributes.

TabsTrigger

Trigger

Prop	Type	Default	Description
`value`	`string`	—	Value that links this trigger to a content panel.
`disabled`?	`boolean`	—	Disable this trigger.

TabsContent

Content

Prop	Type	Default	Description
`value`	`string`	—	Value that links this panel to a trigger.
`forceMount`?	`boolean`	—	Keep content mounted even when inactive.