Radix Vue

Appearance

Tabs ​

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

Features ​

  • Can be controlled or uncontrolled.
  • Supports horizontal/vertical orientation.
  • Supports automatic/manual activation.
  • Full keyboard navigation.

Installation ​

Install the component from your command line.

bash
npm install radix-vue

Anatomy ​

Import all parts and piece them together.

vue
<script setup>
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
</script>

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

API Reference ​

Root ​

Contains all the tabs component parts.

PropTypeDefault
defaultValue
string
modelValue
string
orientation
enum
"horizontal"
dir
enum
activationMode
enum
"automatic"
asChild
boolean
false
EmitType
@update:modelValue
(value: string) => void
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

List ​

Contains the triggers that are aligned along the edge of the active content.

PropTypeDefault
asChild
boolean
false
loop
boolean
true
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

Trigger ​

The button that activates its associated content.

PropTypeDefault
asChild
boolean
false
value*
string
disabled
boolean
false
Data AttributeValue
[data-state]"active" | "inactive"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

Content ​

Contains the content associated with each trigger.

PropTypeDefault
asChild
boolean
false
value*
string
forceMount
boolean
Data AttributeValue
[data-state]"active" | "inactive"
[data-orientation]"vertical" | "horizontal"

Examples ​

Vertical ​

You can create vertical tabs by using the orientation prop.

vue
<script setup>
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
</script>

<template>
  <TabsRoot default-value="tab1" orientation="vertical">
    <TabsList aria-label="tabs example">
      <TabsTrigger value="tab1">
        One
      </TabsTrigger>
      <TabsTrigger value="tab2">
        Two
      </TabsTrigger>
      <TabsTrigger value="tab3">
        Three
      </TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">
      Tab one content
    </TabsContent>
    <TabsContent value="tab2">
      Tab two content
    </TabsContent>
    <TabsContent value="tab3">
      Tab three content
    </TabsContent>
  </TabsRoot>
</template>

Accessibility ​

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard Interactions ​

KeyDescription
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.