Tabs

Display a tab navigation.

Usage

We currently don't have support for an items prop that would allow for slot based rendering of the content. For now, use the TabsContent import directly from the reka-ui package.

tab-1 
      <script lang="ts" setup>
import { TabsContent } from 'reka-ui'

const activeTab = ref('tab1')
</script>

<template>
  <CTabs
    v-model="activeTab"
    class="flex flex-col gap-6"
  >
    <CTabsItem value="tab1">
      Virtual machines
    </CTabsItem>
    <CTabsItem value="tab2">
      Bare metal
    </CTabsItem>
    <template #content>
      <TabsContent value="tab1">
        tab-1
      </TabsContent>
      <TabsContent value="tab2">
        tab-2
      </TabsContent>
    </template>
  </CTabs>
</template>

Routed tabs

      <script lang="ts" setup>
import { NuxtLink } from '#components'

const route = useRoute()
</script>

<template>
  <div>
    <CTabs
      :model-value="route.path"
      as="nav"
    >
      <CTabsItem
        :as="NuxtLink"
        to="/components/tabs"
        value="/components/tabs"
      >
        Tabs
      </CTabsItem>
      <CTabsItem
        :as="NuxtLink"
        value="/components/alert"
        to="/components/alert"
      >
        Alert
      </CTabsItem>
    </CTabs>
    <NuxtPage />
  </div>
</template>

Props

Tabs

Prop Default Type
as"div" "label" | "input" | "a" | "button" | "div" | "form" | "h2" | "h3" | "img" | "li" | "nav" | "ol" | "p" | "span" | "template" | "ul" | "svg" | ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> | (props: any, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed | undefined) => void; }, "expose">): any | ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> | {} & string
The element or component this component should render as. Can be overwritten by asChild.
defaultValue string | number
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
orientationhorizontal "vertical" | "horizontal"
The orientation the tabs are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
dir "ltr" | "rtl"
The reading direction of the combobox when applicable.
If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
activationModeautomatic "automatic" | "manual"
Whether a tab is activated automatically (on focus) or manually (on click).
modelValue string | number
The controlled value of the tab to activate. Can be bind as v-model.
unmountOnHide`true`boolean
When true, the element will be unmounted on closed state.
asChildboolean
Change the default rendered element for the one passed as a child, merging their props and behavior.Read our Composition guide for more details.

TabsItem

Prop Default Type
as"div" "label" | "input" | "a" | "button" | "div" | "form" | "h2" | "h3" | "img" | "li" | "nav" | "ol" | "p" | "span" | "template" | "ul" | "svg" | ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> | (props: any, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed | undefined) => void; }, "expose">): any | ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> | {} & string
The element or component this component should render as. Can be overwritten by asChild.
valuestring | number
A unique value that associates the trigger with a content.
disabledboolean
When true, prevents the user from interacting with the tab.
asChildboolean
Change the default rendered element for the one passed as a child, merging their props and behavior.Read our Composition guide for more details.