Preview

Installation

npx sigma-ui@latest add tabs

Usage

<script setup lang="ts">
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/tabs';
</script>

<template>
  <Tabs default-value="account">
    <TabsList>
      <TabsTrigger value="account">
        Account
      </TabsTrigger>
      <TabsTrigger value="password">
        Password
      </TabsTrigger>
    </TabsList>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">
      Change your password here.
    </TabsContent>
  </Tabs>
</template>

• Each TabsTrigger shows the TabsContent with the same value.
• Use defaultValue to select a tab initially, or v-model to control the active tab.

Examples

Controlled

Bind v-model to read or change the active tab from outside the component.

<script setup lang="ts">
import { ref } from 'vue';
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/tabs';

const activeTab = ref('account');
</script>

<template>
  <p>Active tab: {{ activeTab }}</p>
  <Tabs v-model="activeTab">
    <TabsList>
      <TabsTrigger value="account">
        Account
      </TabsTrigger>
      <TabsTrigger value="password">
        Password
      </TabsTrigger>
    </TabsList>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">
      Change your password here.
    </TabsContent>
  </Tabs>
</template>

API Reference

Tabs

Props

Prop	Type	Default
defaultValue The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs	StringOrNumber	-
orientation The orientation the tabs are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down)	DataOrientation	horizontal
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
activationMode Whether a tab is activated automatically (on focus) or manually (on click).	"automatic" | "manual"	automatic
modelValue The controlled value of the tab to activate. Can be bind as v-model.	StringOrNumber	-
unmountOnHide When true, the element will be unmounted on closed state.	boolean	`true`
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
update:modelValue Event handler called when the value changes	[payload: StringOrNumber]

Slots

Slot	Scope
default The content of the component.	-

TabsTrigger

Props

Prop	Type	Default
valuerequired A unique value that associates the trigger with a content.	StringOrNumber	-
disabled When true, prevents the user from interacting with the tab.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

TabsList

Props

Prop	Type	Default
loop When true, keyboard navigation will loop from last tab to first, and vice versa.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

TabsContent

Props

Prop	Type	Default
valuerequired A unique value that associates the content with a trigger.	StringOrNumber	-
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the Tabs WAI-ARIA design pattern. Reka UI handles the roles, the selected state, and the roving focus between triggers.

Key	Description
Tab	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
ArrowDown	Moves focus to the next trigger, depending on orientation, and activates its associated content.
ArrowRight	Moves focus to the next trigger, depending on orientation, and activates its associated content.
ArrowUp	Moves focus to the previous trigger, depending on orientation, and activates its associated content.
ArrowLeft	Moves focus to the previous trigger, depending on orientation, and activates its associated content.
Home	Moves focus to the first trigger and activates its associated content.
End	Moves focus to the last trigger and activates its associated content.