Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Examples

Default

Account

Make changes to your account here. Click save when you're done.

Name

Username

<script setup>
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Button,
  Input,
  Label
} from '@empathyds/vue'
</script>

<Tabs default-value="account" class="w-100">
  <TabsList class="grid w-full grid-cols-2">
    <TabsTrigger value="account">
      Account
    </TabsTrigger>
    <TabsTrigger value="password">
      Password
    </TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>
          Make changes to your account here. Click save when you're done.
        </CardDescription>
      </CardHeader>
      <CardContent class="space-y-2">
        <div class="space-y-1">
          <Label for="name">Name</Label>
          <Input id="name" default-value="Pedro Duarte" />
        </div>
        <div class="space-y-1">
          <Label for="username">Username</Label>
          <Input id="username" default-value="@peduarte" />
        </div>
      </CardContent>
      <CardFooter>
        <Button>Save changes</Button>
      </CardFooter>
    </Card>
  </TabsContent>
  <TabsContent value="password">
    <Card>
      <CardHeader>
        <CardTitle>Password</CardTitle>
        <CardDescription>
          Change your password here. After saving, you'll be logged out.
        </CardDescription>
      </CardHeader>
      <CardContent class="space-y-2">
        <div class="space-y-1">
          <Label for="current">Current password</Label>
          <Input id="current" type="password" />
        </div>
        <div class="space-y-1">
          <Label for="new">New password</Label>
          <Input id="new" type="password" />
        </div>
      </CardContent>
      <CardFooter>
        <Button>Save password</Button>
      </CardFooter>
    </Card>
  </TabsContent>
</Tabs>

Props

Tabs

Prop	Type	Default	Description
defaultValue	string	-	The default value of the tabs.
modelValue	string	-	The controlled value of the tabs.
orientation	horizontal | vertical	horizontal	The orientation of the tabs.
dir	ltr | rtl	-	The reading direction of the tabs.
activationMode	automatic | manual	automatic	The activation mode of the tabs.

Events

Tabs

Event	Payload	Description
update:modelValue	string	Event handler called when the value changes.

Slots

Tabs

Slot	Description
default	The content of the tabs.

TabsList

Slot	Description
default	The content of the tabs list.

TabsTrigger

Slot	Description
default	The content of the trigger.

TabsContent

Slot	Description
default	The content of the tab panel.