Tabs

Horizontal tabs

Profile content goes here.

Active: tab1

<script setup>
import { ref } from 'vue'
const active = ref('tab1')
</script>

<template>
  <FuiTabs v-model="active" :tabs="[
    { value: 'profile', label: 'Profile' },
    { value: 'settings', label: 'Settings' },
  ]">
    <template #profile>Profile content</template>
    <template #settings>Settings content</template>
  </FuiTabs>
</template>

With disabled tab

Active tab content.

<script setup>
import { ref } from 'vue'
const active = ref('tab1')
</script>

<template>
  <FuiTabs v-model="active" :tabs="[
    { value: 'tab1', label: 'Active' },
    { value: 'tab2', label: 'Disabled', disabled: true },
    { value: 'tab3', label: 'Available' },
  ]" />
</template>

Props

Prop	Type	Default	Description
modelValue	string	''	Active tab value
tabs	FuiTab[]	required	Tab definitions
orientation	horizontal | vertical	horizontal	Tab orientation

FuiTab

Prop	Type	Description
value	string	Tab identifier
label	string	Display label
disabled?	boolean	Tab disabled