Usage

Import TabList and Tab from their dedicated entry and control selection with v-model:value.

<script setup lang="ts">
import { Tab, TabList } from '@astryx-vue/core/TabList'
import { ref } from 'vue'

const value = ref('overview')
</script>

<template>
  <TabList v-model:value="value">
    <Tab value="overview">
      Overview
    </Tab>
    <Tab value="props">
      Props
    </Tab>
    <Tab value="examples">
      Examples
    </Tab>
  </TabList>
</template>

Best practices

Guidance	Practice
Recommended	Use semantic role="tablist", role="tab", and aria-selected for accessible tabs.
Recommended	Give each Tab a unique value for selection and keyboard navigation.
Recommended	Use disabled for unavailable tabs; keyboard navigation skips them automatically.
Don't	Put too many tabs in a single strip; consider scrolling or reorganizing content when it overflows.
Don't	Use TabList for page-level navigation; Breadcrumbs or Link are better for wayfinding.

Examples

Basic

A basic tab list that switches the selected value on click.

Sizes

Tabs come in sm, md, and lg sizes.

With divider

Use has-divider to add a bottom border to the tab list.