Tabs

A set of layered sections of content, displayed one at a time.

<script setup lang="ts">
import { ref } from 'vue'
import { Tabs } from '@destyler-ui/vue'

const items = ref([
  { value: 'React' },
  { value: 'Solid' },
  { value: 'Svelte', disabled: true },
  { value: 'Vue' }
])
</script>
<template>
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger v-for="(item, idx) in items" :key="idx" :value="item.value" :disabled="item.disabled">
        {{ item.value }} Trigger
      </Tabs.Trigger>
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content v-for="(item, idx) in items" :key="idx" :value="item.value">{{ item.value }} Content</Tabs.Content>
  </Tabs.Root>
</template>

import { Tabs } from '@destyler-ui/react'

interface BasicProps {
  defaultValue?: string
  onValueChange?: (details: { value: string | null }) => void
  loopFocus?: boolean
  orientation?: 'horizontal' | 'vertical'
  lazyMount?: boolean
  unmountOnExit?: boolean
}

const items = [
  { value: 'React' },
  { value: 'Solid' },
  { value: 'Svelte', disabled: true },
  { value: 'Vue' },
]

export function Basic(props: BasicProps) {
  return (
    <Tabs.Root {...props}>
      <Tabs.List>
        {items.map(item => (
          <Tabs.Trigger key={item.value} value={item.value} disabled={item.disabled}>
            {item.value}
            {' '}
            Trigger
          </Tabs.Trigger>
        ))}
        <Tabs.Indicator />
      </Tabs.List>
      {items.map(item => (
        <Tabs.Content key={item.value} value={item.value}>
          {item.value}
          {' '}
          Content
        </Tabs.Content>
      ))}
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'

export function Basic() {
  return (
    <Tabs.Root>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">
  import type { TabsRootProps } from '@destyler-ui/svelte'
  import { Tabs } from '@destyler-ui/svelte'
  const props: TabsRootProps = $props()
  const items = [
    { value: 'React' },
    { value: 'Solid' },
    { value: 'Svelte', disabled: true },
    { value: 'Vue' },
  ]
</script>
<Tabs.Root {...props}>
  <Tabs.List>
    {#each items as item (item.value)}<Tabs.Trigger value={item.value} disabled={item.disabled}>{item.value} Trigger</Tabs.Trigger>{/each}
    <Tabs.Indicator />
  </Tabs.List>
  {#each items as item (item.value)}<Tabs.Content value={item.value}>{item.value} Content</Tabs.Content>{/each}
</Tabs.Root>

Anatomy

<script setup lang="ts">
import { Tabs } from '@destyler-ui/vue'
</script>

<template>
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger />
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content />
  </Tabs.Root>
</template>

import { Tabs } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Tabs.Root>
      <Tabs.List>
        <Tabs.Trigger />
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content />
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Tabs.Root>
      <Tabs.List>
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="overview">Overview content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">
  import { Tabs } from '@destyler-ui/svelte'

  const items = [
    { value: 'React' },
    { value: 'Svelte' },
    { value: 'Vue' },
  ]
</script>

<Tabs.Root>
  <Tabs.List>
    {#each items as item (item.value)}
      <Tabs.Trigger value={item.value}>{item.value}</Tabs.Trigger>
    {/each}
    <Tabs.Indicator />
  </Tabs.List>
  {#each items as item (item.value)}
    <Tabs.Content value={item.value}>{item.value} content</Tabs.Content>
  {/each}
</Tabs.Root>

Examples

Basic

<script setup lang="ts">
import { ref } from 'vue'
import { Tabs } from '@destyler-ui/vue'

const items = ref([
  { value: 'React' },
  { value: 'Solid' },
  { value: 'Svelte', disabled: true },
  { value: 'Vue' }
])
</script>
<template>
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger v-for="(item, idx) in items" :key="idx" :value="item.value" :disabled="item.disabled">
        {{ item.value }} Trigger
      </Tabs.Trigger>
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content v-for="(item, idx) in items" :key="idx" :value="item.value">{{ item.value }} Content</Tabs.Content>
  </Tabs.Root>
</template>

import { Tabs } from '@destyler-ui/react'

interface BasicProps {
  defaultValue?: string
  onValueChange?: (details: { value: string | null }) => void
  loopFocus?: boolean
  orientation?: 'horizontal' | 'vertical'
  lazyMount?: boolean
  unmountOnExit?: boolean
}

const items = [
  { value: 'React' },
  { value: 'Solid' },
  { value: 'Svelte', disabled: true },
  { value: 'Vue' },
]

export function Basic(props: BasicProps) {
  return (
    <Tabs.Root {...props}>
      <Tabs.List>
        {items.map(item => (
          <Tabs.Trigger key={item.value} value={item.value} disabled={item.disabled}>
            {item.value}
            {' '}
            Trigger
          </Tabs.Trigger>
        ))}
        <Tabs.Indicator />
      </Tabs.List>
      {items.map(item => (
        <Tabs.Content key={item.value} value={item.value}>
          {item.value}
          {' '}
          Content
        </Tabs.Content>
      ))}
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'

export function Basic() {
  return (
    <Tabs.Root>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">
  import type { TabsRootProps } from '@destyler-ui/svelte'
  import { Tabs } from '@destyler-ui/svelte'
  const props: TabsRootProps = $props()
  const items = [
    { value: 'React' },
    { value: 'Solid' },
    { value: 'Svelte', disabled: true },
    { value: 'Vue' },
  ]
</script>
<Tabs.Root {...props}>
  <Tabs.List>
    {#each items as item (item.value)}<Tabs.Trigger value={item.value} disabled={item.disabled}>{item.value} Trigger</Tabs.Trigger>{/each}
    <Tabs.Indicator />
  </Tabs.List>
  {#each items as item (item.value)}<Tabs.Content value={item.value}>{item.value} Content</Tabs.Content>{/each}
</Tabs.Root>

Controlled

Control the active tab programmatically.

<script setup lang="ts">
import { Tabs } from '@destyler-ui/vue'
import { ref } from 'vue'

const value = ref<string | null>('react')
</script>

<template>
  <Tabs.Root v-model="value">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
</template>

import { useState } from 'react'
import { Tabs } from '@destyler-ui/react'

export function Controlled() {
  const [value, setValue] = useState<string | null>('react')

  return (
    <Tabs.Root value={value} onValueChange={({ value }) => setValue(value)}>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [value, setValue] = createSignal<string | null>('react')
  return (
    <Tabs.Root value={value()} onValueChange={e => setValue(e.value)}>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">
  import { Tabs } from '@destyler-ui/svelte'
  let value = $state<string | null>('react')
</script>
<Tabs.Root bind:value><Tabs.List><Tabs.Trigger value="react">React</Tabs.Trigger><Tabs.Trigger value="vue">Vue</Tabs.Trigger><Tabs.Trigger value="solid">Solid</Tabs.Trigger></Tabs.List><Tabs.Content value="react">React Content</Tabs.Content><Tabs.Content value="vue">Vue Content</Tabs.Content><Tabs.Content value="solid">Solid Content</Tabs.Content></Tabs.Root>

Initial Tab

Set the initially active tab.

<script setup lang="ts">
import { Tabs } from '@destyler-ui/vue'
</script>

<template>
  <Tabs.Root default-value="react">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
</template>

import { Tabs } from '@destyler-ui/react'

export function InitialTab() {
  return (
    <Tabs.Root defaultValue="react">
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'

export function InitialTab() {
  return (
    <Tabs.Root defaultValue="react">
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">
  import { Tabs } from '@destyler-ui/svelte'
</script>

<Tabs.Root defaultValue="react">
  <Tabs.List>
    <Tabs.Trigger value="react">React</Tabs.Trigger>
    <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
    <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="react">React Content</Tabs.Content>
  <Tabs.Content value="vue">Vue Content</Tabs.Content>
  <Tabs.Content value="solid">Solid Content</Tabs.Content>
</Tabs.Root>

Disabled Tab

Disable specific tabs.

<script setup lang="ts">
import { Tabs } from '@destyler-ui/vue'
</script>

<template>
  <Tabs.Root defaultValue="react">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue" disabled>Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
</template>

import { Tabs } from '@destyler-ui/react'

export function DisabledTab() {
  return (
    <Tabs.Root defaultValue="react">
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue" disabled>Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'

export function DisabledTab() {
  return (
    <Tabs.Root defaultValue="react">
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue" disabled>
          Vue
        </Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">import { Tabs } from '@destyler-ui/svelte'</script>
<Tabs.Root defaultValue="react"><Tabs.List><Tabs.Trigger value="react">React</Tabs.Trigger><Tabs.Trigger value="vue" disabled>Vue</Tabs.Trigger><Tabs.Trigger value="solid">Solid</Tabs.Trigger></Tabs.List><Tabs.Content value="react">React Content</Tabs.Content><Tabs.Content value="vue">Vue Content</Tabs.Content><Tabs.Content value="solid">Solid Content</Tabs.Content></Tabs.Root>

Indicator

Display an active tab indicator.

<script setup lang="ts">
import { Tabs } from '@destyler-ui/vue'
</script>

<template>
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
</template>

import { Tabs } from '@destyler-ui/react'

export function Indicator() {
  return (
    <Tabs.Root>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'

export function Indicator() {
  return (
    <Tabs.Root>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">import { Tabs } from '@destyler-ui/svelte'</script>
<Tabs.Root><Tabs.List><Tabs.Trigger value="react">React</Tabs.Trigger><Tabs.Trigger value="vue">Vue</Tabs.Trigger><Tabs.Trigger value="solid">Solid</Tabs.Trigger><Tabs.Indicator /></Tabs.List><Tabs.Content value="react">React Content</Tabs.Content><Tabs.Content value="vue">Vue Content</Tabs.Content><Tabs.Content value="solid">Solid Content</Tabs.Content></Tabs.Root>

Vertical

Display tabs in a vertical orientation.

<script setup lang="ts">
import { Tabs } from '@destyler-ui/vue'
import { ref } from 'vue'

const value = ref<string | null>('react')
</script>

<template>
  <Tabs.Root v-model="value" orientation="vertical">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
</template>

import { useState } from 'react'
import { Tabs } from '@destyler-ui/react'

export function Vertical() {
  const [value, setValue] = useState<string | null>('react')

  return (
    <Tabs.Root value={value} onValueChange={({ value }) => setValue(value)} orientation="vertical">
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'

export function Vertical() {
  return (
    <Tabs.Root orientation="vertical" defaultValue="react">
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">
  import { Tabs } from '@destyler-ui/svelte'
  let value = $state<string | null>('react')
</script>
<Tabs.Root bind:value orientation="vertical"><Tabs.List><Tabs.Trigger value="react">React</Tabs.Trigger><Tabs.Trigger value="vue">Vue</Tabs.Trigger><Tabs.Trigger value="solid">Solid</Tabs.Trigger></Tabs.List><Tabs.Content value="react">React Content</Tabs.Content><Tabs.Content value="vue">Vue Content</Tabs.Content><Tabs.Content value="solid">Solid Content</Tabs.Content></Tabs.Root>

Manual

Require manual activation of tabs (click instead of arrow keys).

<script setup lang="ts">
import { Tabs } from '@destyler-ui/vue'
import { ref } from 'vue'

const value = ref<string | null>('react')
</script>

<template>
  <Tabs.Root v-model="value" activationMode="manual">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
</template>

import { useState } from 'react'
import { Tabs } from '@destyler-ui/react'

export function Manual() {
  const [value, setValue] = useState<string | null>('react')

  return (
    <Tabs.Root value={value} onValueChange={({ value }) => setValue(value)} activationMode="manual">
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'

export function Manual() {
  return (
    <Tabs.Root activationMode="manual" defaultValue="react">
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">
  import { Tabs } from '@destyler-ui/svelte'
  let value = $state<string | null>('react')
</script>
<Tabs.Root bind:value activationMode="manual"><Tabs.List><Tabs.Trigger value="react">React</Tabs.Trigger><Tabs.Trigger value="vue">Vue</Tabs.Trigger><Tabs.Trigger value="solid">Solid</Tabs.Trigger></Tabs.List><Tabs.Content value="react">React Content</Tabs.Content><Tabs.Content value="vue">Vue Content</Tabs.Content><Tabs.Content value="solid">Solid Content</Tabs.Content></Tabs.Root>

Lazy Mount

Mount tab content lazily when first selected.

<script setup lang="ts">
import { Tabs } from '@destyler-ui/vue'
</script>

<template>
  <Tabs.Root lazyMount unmountOnExit>
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
</template>

import { Tabs } from '@destyler-ui/react'

export function LazyMount() {
  return (
    <Tabs.Root lazyMount unmountOnExit>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

import { Tabs } from '@destyler-ui/solid/tabs'

export function LazyMount() {
  return (
    <Tabs.Root lazyMount unmountOnExit>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

<script lang="ts">import { Tabs } from '@destyler-ui/svelte'</script>
<Tabs.Root lazyMount unmountOnExit><Tabs.List><Tabs.Trigger value="react">React</Tabs.Trigger><Tabs.Trigger value="vue">Vue</Tabs.Trigger><Tabs.Trigger value="solid">Solid</Tabs.Trigger><Tabs.Indicator /></Tabs.List><Tabs.Content value="react">React Content</Tabs.Content><Tabs.Content value="vue">Vue Content</Tabs.Content><Tabs.Content value="solid">Solid Content</Tabs.Content></Tabs.Root>

Root Provider

<script setup lang="ts">
import { Tabs, useTabs } from '@destyler-ui/vue'

const tabs = useTabs()
</script>

<template>
  <button @click="tabs.focus()">Focus</button>

  <Tabs.RootProvider :value="tabs">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.RootProvider>
</template>

import { Tabs, useTabs } from '@destyler-ui/react'

export function RootProvider() {
  const tabs = useTabs()

  return (
    <>
      <button type="button" onClick={() => tabs.focus()}>Focus</button>

      <Tabs.RootProvider value={tabs}>
        <Tabs.List>
          <Tabs.Trigger value="react">React</Tabs.Trigger>
          <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
          <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="react">React Content</Tabs.Content>
        <Tabs.Content value="vue">Vue Content</Tabs.Content>
        <Tabs.Content value="solid">Solid Content</Tabs.Content>
      </Tabs.RootProvider>
    </>
  )
}

import { Tabs, useTabs } from '@destyler-ui/solid/tabs'

export function RootProvider() {
  const tabs = useTabs()

  return (
    <>
      <button onClick={() => tabs().focus()}>Focus</button>

      <Tabs.RootProvider value={tabs}>
        <Tabs.List>
          <Tabs.Trigger value="react">React</Tabs.Trigger>
          <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
          <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="react">React Content</Tabs.Content>
        <Tabs.Content value="vue">Vue Content</Tabs.Content>
        <Tabs.Content value="solid">Solid Content</Tabs.Content>
      </Tabs.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Tabs, useTabs } from '@destyler-ui/svelte'
  const id = $props.id()
  const tabs = useTabs({ id })
</script>
<button onclick={() => tabs().focus()}>Focus</button>
<Tabs.RootProvider value={tabs}><Tabs.List><Tabs.Trigger value="react">React</Tabs.Trigger><Tabs.Trigger value="vue">Vue</Tabs.Trigger><Tabs.Trigger value="solid">Solid</Tabs.Trigger></Tabs.List><Tabs.Content value="react">React Content</Tabs.Content><Tabs.Content value="vue">Vue Content</Tabs.Content><Tabs.Content value="solid">Solid Content</Tabs.Content></Tabs.RootProvider>

API Reference

Root

Prop	Default	Type
`activationMode`	`"automatic"`	`"manual" \| "automatic"` The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`composite`	—	`false \| true` Whether the tab is composite
`defaultValue`	—	`null \| string` The initial value of the tabs when it is first rendered. Use when you do not need to control the state of the tabs.
`deselectable`	—	`false \| true` Whether the active tab can be deselected when clicking on it.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; trigger: string; list: string; content: string; indicator: string; }>` The ids of the elements in the tabs. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`loopFocus`	`true`	`false \| true` Whether the keyboard navigation will loop from last tab to first, and vice versa.
`modelValue`	—	`null \| string`
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`translations`	—	`tabs.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Emit	Event
`focusChange`	`[details: FocusChangeDetails]` Callback to be called when the focused tab changes
`update:modelValue`	`[value: string \| null]` The callback fired when the model value changes.
`valueChange`	`[details: Omit<ValueChangeDetails, "value"> & { value: string \| null; }]` Callback to be called when the selected/active tab changes

Content

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Indicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Whether the tab is disabled

Root

Prop	Default	Type
`activationMode`	`"automatic"`	`"manual" \| "automatic"` The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`composite`	—	`false \| true` Whether the tab is composite
`defaultValue`	—	`null \| string` The initial value of the tabs when it is first rendered. Use when you do not need to control the state of the tabs.
`deselectable`	—	`false \| true` Whether the active tab can be deselected when clicking on it.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; trigger: string; list: string; content: string; indicator: string; }>` The ids of the elements in the tabs. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`loopFocus`	`true`	`false \| true` Whether the keyboard navigation will loop from last tab to first, and vice versa.
`navigate`	—	`(details: NavigateDetails) => void` Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`onFocusChange`	—	`(details: tabs.FocusChangeDetails) => void` Callback to be called when the focused tab changes
`onValueChange`	—	`(details: tabs.ValueChangeDetails) => void` Callback to be called when the selected/active tab changes
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`translations`	—	`tabs.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.
`value`	—	`null \| string` The controlled selected tab id

Content

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseTabsContext) => ReactNode`

Indicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseTabsReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Whether the tab is disabled

Root

Prop	Default	Type
`activationMode`	`"automatic"`	`"manual" \| "automatic"` The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`composite`	—	`false \| true` Whether the tab is composite
`defaultValue`	—	`null \| string` The initial value of the tabs when it is first rendered. Use when you do not need to control the state of the tabs.
`deselectable`	—	`false \| true` Whether the active tab can be deselected when clicking on it.
`ids`	—	`Partial<{ root: string; trigger: string; list: string; content: string; indicator: string; }>` The ids of the elements in the tabs. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`loopFocus`	`true`	`false \| true` Whether the keyboard navigation will loop from last tab to first, and vice versa.
`navigate`	—	`(details: NavigateDetails) => void` Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`onFocusChange`	—	`(details: FocusChangeDetails) => void` Callback to be called when the focused tab changes
`onValueChange`	—	`(details: ValueChangeDetails) => void` Callback to be called when the selected/active tab changes
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`translations`	—	`tabs.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.
`value`	—	`null \| string` The controlled selected tab id

Content

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseTabsContext) => Element`

Indicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseTabsReturn`
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

TabContent

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

TabIndicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

TabList

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

TabTrigger

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Whether the tab is disabled

Trigger

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Whether the tab is disabled

Root

Prop	Default	Type
`activationMode`	`"automatic"`	`"manual" \| "automatic"` The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`composite`	—	`false \| true` Whether the tab is composite
`defaultValue`	—	`null \| string` The initial selected tab id when it is not controlled. Prefer this over seeding with `value` for uncontrolled usage.
`deselectable`	—	`false \| true` Whether the active tab can be deselected when clicking on it.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; trigger: string; list: string; content: string; indicator: string; }>` The ids of the elements in the tabs. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`loopFocus`	`true`	`false \| true` Whether the keyboard navigation will loop from last tab to first, and vice versa.
`navigate`	—	`(details: NavigateDetails) => void` Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`onFocusChange`	—	`(details: import("@destyler/tabs").FocusChangeDetails) => void` Callback to be called when the focused tab changes
`onValueChange`	—	`(details: import("@destyler/tabs").ValueChangeDetails) => void` Callback to be called when the selected/active tab changes
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`translations`	—	`import("@destyler/tabs").IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.
`value`	—	`null \| string` The controlled selected tab id

Content

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseTabsContext]>`

Indicator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

List

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseTabsReturn`
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`value*`	—	`string` The value of the tab
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`
`disabled`	—	`false \| true` Whether the tab is disabled