# Tabs

URL: https://ark-ui.com/docs/components/tabs
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/tabs.mdx

Flexible navigation tool with various modes and features.

---

<ComponentPreview id="Tabs" />

## Anatomy

<Anatomy id="tabs" />

```tsx
<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>
```

## Examples

**Example: basic**

#### React

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import styles from 'styles/tabs.module.css'

export const Basic = () => (
  <Tabs.Root className={styles.Root} defaultValue="account">
    <Tabs.List className={styles.List}>
      <Tabs.Trigger className={styles.Trigger} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="billing">
        Billing
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content className={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Solid

```tsx
import { Tabs } from '@ark-ui/solid/tabs'
import styles from 'styles/tabs.module.css'

export const Basic = () => (
  <Tabs.Root class={styles.Root} defaultValue="account">
    <Tabs.List class={styles.List}>
      <Tabs.Trigger class={styles.Trigger} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="billing">
        Billing
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content class={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Tabs } from '@ark-ui/vue/tabs'
import styles from 'styles/tabs.module.css'
</script>

<template>
  <Tabs.Root :class="styles.Root" default-value="account">
    <Tabs.List :class="styles.List">
      <Tabs.Trigger :class="styles.Trigger" value="account">Account</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="password">Password</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="billing">Billing</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content :class="styles.Content" value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="password">Change your password here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="billing">Manage your billing and payment details.</Tabs.Content>
  </Tabs.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Tabs } from '@ark-ui/svelte/tabs'
  import styles from 'styles/tabs.module.css'
</script>

<Tabs.Root class={styles.Root} defaultValue="account">
  <Tabs.List class={styles.List}>
    <Tabs.Trigger class={styles.Trigger} value="account">Account</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="password">Password</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content class={styles.Content} value="account">Make changes to your account here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="password">Change your password here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="billing">Manage your billing and payment details.</Tabs.Content>
</Tabs.Root>

```

### Controlled

To create a controlled Tabs component, manage the current selected tab using the `value` prop and update it when the
`onValueChange` event handler is called:

**Example: controlled**

#### React

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import { useState } from 'react'
import styles from 'styles/tabs.module.css'

export const Controlled = () => {
  const [value, setValue] = useState<string | null>('account')
  return (
    <Tabs.Root className={styles.Root} value={value} onValueChange={(e) => setValue(e.value)}>
      <Tabs.List className={styles.List}>
        <Tabs.Trigger className={styles.Trigger} value="account">
          Account
        </Tabs.Trigger>
        <Tabs.Trigger className={styles.Trigger} value="password">
          Password
        </Tabs.Trigger>
        <Tabs.Trigger className={styles.Trigger} value="billing">
          Billing
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content className={styles.Content} value="account">
        Make changes to your account here.
      </Tabs.Content>
      <Tabs.Content className={styles.Content} value="password">
        Change your password here.
      </Tabs.Content>
      <Tabs.Content className={styles.Content} value="billing">
        Manage your billing and payment details.
      </Tabs.Content>
    </Tabs.Root>
  )
}

```

#### Solid

```tsx
import { Tabs } from '@ark-ui/solid/tabs'
import { createSignal } from 'solid-js'
import styles from 'styles/tabs.module.css'

export const Controlled = () => {
  const [value, setValue] = createSignal<string | null>('account')
  return (
    <Tabs.Root class={styles.Root} value={value()} onValueChange={(e) => setValue(e.value)}>
      <Tabs.List class={styles.List}>
        <Tabs.Trigger class={styles.Trigger} value="account">
          Account
        </Tabs.Trigger>
        <Tabs.Trigger class={styles.Trigger} value="password">
          Password
        </Tabs.Trigger>
        <Tabs.Trigger class={styles.Trigger} value="billing">
          Billing
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content class={styles.Content} value="account">
        Make changes to your account here.
      </Tabs.Content>
      <Tabs.Content class={styles.Content} value="password">
        Change your password here.
      </Tabs.Content>
      <Tabs.Content class={styles.Content} value="billing">
        Manage your billing and payment details.
      </Tabs.Content>
    </Tabs.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Tabs } from '@ark-ui/vue/tabs'
import { ref } from 'vue'
import styles from 'styles/tabs.module.css'

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

<template>
  <Tabs.Root :class="styles.Root" v-model="value">
    <Tabs.List :class="styles.List">
      <Tabs.Trigger :class="styles.Trigger" value="account">Account</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="password">Password</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="billing">Billing</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content :class="styles.Content" value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="password">Change your password here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="billing">Manage your billing and payment details.</Tabs.Content>
  </Tabs.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Tabs } from '@ark-ui/svelte/tabs'
  import styles from 'styles/tabs.module.css'

  let value = $state<string | null>('account')
</script>

<Tabs.Root class={styles.Root} bind:value>
  <Tabs.List class={styles.List}>
    <Tabs.Trigger class={styles.Trigger} value="account">Account</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="password">Password</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content class={styles.Content} value="account">Make changes to your account here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="password">Change your password here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="billing">Manage your billing and payment details.</Tabs.Content>
</Tabs.Root>

```

### Root Provider

An alternative way to control the tabs is to use the `RootProvider` component and the `useTabs` hook. This way you can
access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { Tabs, useTabs } from '@ark-ui/react/tabs'
import styles from 'styles/tabs.module.css'

export const RootProvider = () => {
  const tabs = useTabs({ defaultValue: 'account' })

  return (
    <div className="stack">
      <output>selected: {tabs.value}</output>
      <Tabs.RootProvider className={styles.Root} value={tabs}>
        <Tabs.List className={styles.List}>
          <Tabs.Trigger className={styles.Trigger} value="account">
            Account
          </Tabs.Trigger>
          <Tabs.Trigger className={styles.Trigger} value="password">
            Password
          </Tabs.Trigger>
          <Tabs.Trigger className={styles.Trigger} value="billing">
            Billing
          </Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content className={styles.Content} value="account">
          Make changes to your account here.
        </Tabs.Content>
        <Tabs.Content className={styles.Content} value="password">
          Change your password here.
        </Tabs.Content>
        <Tabs.Content className={styles.Content} value="billing">
          Manage your billing and payment details.
        </Tabs.Content>
      </Tabs.RootProvider>
    </div>
  )
}

```

#### Solid

```tsx
import { Tabs, useTabs } from '@ark-ui/solid/tabs'
import styles from 'styles/tabs.module.css'

export const RootProvider = () => {
  const tabs = useTabs({ defaultValue: 'account' })

  return (
    <div class="stack">
      <output>selected: {tabs().value}</output>
      <Tabs.RootProvider class={styles.Root} value={tabs}>
        <Tabs.List class={styles.List}>
          <Tabs.Trigger class={styles.Trigger} value="account">
            Account
          </Tabs.Trigger>
          <Tabs.Trigger class={styles.Trigger} value="password">
            Password
          </Tabs.Trigger>
          <Tabs.Trigger class={styles.Trigger} value="billing">
            Billing
          </Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content class={styles.Content} value="account">
          Make changes to your account here.
        </Tabs.Content>
        <Tabs.Content class={styles.Content} value="password">
          Change your password here.
        </Tabs.Content>
        <Tabs.Content class={styles.Content} value="billing">
          Manage your billing and payment details.
        </Tabs.Content>
      </Tabs.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Tabs, useTabs } from '@ark-ui/vue/tabs'
import styles from 'styles/tabs.module.css'

const tabs = useTabs({ defaultValue: 'account' })
</script>

<template>
  <div class="stack">
    <output>selected: {{ tabs.value }}</output>
    <Tabs.RootProvider :class="styles.Root" :value="tabs">
      <Tabs.List :class="styles.List">
        <Tabs.Trigger :class="styles.Trigger" value="account">Account</Tabs.Trigger>
        <Tabs.Trigger :class="styles.Trigger" value="password">Password</Tabs.Trigger>
        <Tabs.Trigger :class="styles.Trigger" value="billing">Billing</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content :class="styles.Content" value="account">Make changes to your account here.</Tabs.Content>
      <Tabs.Content :class="styles.Content" value="password">Change your password here.</Tabs.Content>
      <Tabs.Content :class="styles.Content" value="billing">Manage your billing and payment details.</Tabs.Content>
    </Tabs.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Tabs, useTabs } from '@ark-ui/svelte/tabs'
  import styles from 'styles/tabs.module.css'

  const id = $props.id()

  const tabs = useTabs({ id, defaultValue: 'account' })
</script>

<div class="stack">
  <output>selected: {tabs().value}</output>
  <Tabs.RootProvider class={styles.Root} value={tabs}>
    <Tabs.List class={styles.List}>
      <Tabs.Trigger class={styles.Trigger} value="account">Account</Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="password">Password</Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="billing">Billing</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content class={styles.Content} value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content class={styles.Content} value="password">Change your password here.</Tabs.Content>
    <Tabs.Content class={styles.Content} value="billing">Manage your billing and payment details.</Tabs.Content>
  </Tabs.RootProvider>
</div>

```

### Indicator

To provide a visual cue for the selected tab, use the `Tabs.Indicator` component:

**Example: indicator**

#### React

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import styles from 'styles/tabs.module.css'

export const Indicator = () => (
  <Tabs.Root className={styles.Root} defaultValue="account">
    <Tabs.List className={styles.List}>
      <Tabs.Trigger className={styles.TriggerIndicator} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.TriggerIndicator} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.TriggerIndicator} value="billing">
        Billing
      </Tabs.Trigger>
      <Tabs.Indicator className={styles.Indicator} />
    </Tabs.List>
    <Tabs.Content className={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Solid

```tsx
import { Tabs } from '@ark-ui/solid/tabs'
import styles from 'styles/tabs.module.css'

export const Indicator = () => (
  <Tabs.Root class={styles.Root} defaultValue="account">
    <Tabs.List class={styles.List}>
      <Tabs.Trigger class={styles.TriggerIndicator} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.TriggerIndicator} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.TriggerIndicator} value="billing">
        Billing
      </Tabs.Trigger>
      <Tabs.Indicator class={styles.Indicator} />
    </Tabs.List>
    <Tabs.Content class={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Tabs } from '@ark-ui/vue/tabs'
import styles from 'styles/tabs.module.css'
</script>

<template>
  <Tabs.Root :class="styles.Root" default-value="account">
    <Tabs.List :class="styles.List">
      <Tabs.Trigger :class="styles.TriggerIndicator" value="account">Account</Tabs.Trigger>
      <Tabs.Trigger :class="styles.TriggerIndicator" value="password">Password</Tabs.Trigger>
      <Tabs.Trigger :class="styles.TriggerIndicator" value="billing">Billing</Tabs.Trigger>
      <Tabs.Indicator :class="styles.Indicator" />
    </Tabs.List>
    <Tabs.Content :class="styles.Content" value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="password">Change your password here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="billing">Manage your billing and payment details.</Tabs.Content>
  </Tabs.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Tabs } from '@ark-ui/svelte/tabs'
  import styles from 'styles/tabs.module.css'
</script>

<Tabs.Root class={styles.Root} defaultValue="account">
  <Tabs.List class={styles.List}>
    <Tabs.Trigger class={styles.TriggerIndicator} value="account">Account</Tabs.Trigger>
    <Tabs.Trigger class={styles.TriggerIndicator} value="password">Password</Tabs.Trigger>
    <Tabs.Trigger class={styles.TriggerIndicator} value="billing">Billing</Tabs.Trigger>
    <Tabs.Indicator class={styles.Indicator} />
  </Tabs.List>
  <Tabs.Content class={styles.Content} value="account">Make changes to your account here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="password">Change your password here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="billing">Manage your billing and payment details.</Tabs.Content>
</Tabs.Root>

```

### Disabled

To disable a tab, simply pass the `disabled` prop to the `Tabs.Trigger` component:

**Example: disabled-tab**

#### React

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import styles from 'styles/tabs.module.css'

export const DisabledTab = () => (
  <Tabs.Root className={styles.Root} defaultValue="account">
    <Tabs.List className={styles.List}>
      <Tabs.Trigger className={styles.Trigger} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="password" disabled>
        Password
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="billing">
        Billing
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content className={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Solid

```tsx
import { Tabs } from '@ark-ui/solid/tabs'
import styles from 'styles/tabs.module.css'

export const DisabledTab = () => (
  <Tabs.Root class={styles.Root} defaultValue="account">
    <Tabs.List class={styles.List}>
      <Tabs.Trigger class={styles.Trigger} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="password" disabled>
        Password
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="billing">
        Billing
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content class={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Tabs } from '@ark-ui/vue/tabs'
import styles from 'styles/tabs.module.css'
</script>

<template>
  <Tabs.Root :class="styles.Root" default-value="account">
    <Tabs.List :class="styles.List">
      <Tabs.Trigger :class="styles.Trigger" value="account">Account</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="password" disabled>Password</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="billing">Billing</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content :class="styles.Content" value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="password">Change your password here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="billing">Manage your billing and payment details.</Tabs.Content>
  </Tabs.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Tabs } from '@ark-ui/svelte/tabs'
  import styles from 'styles/tabs.module.css'
</script>

<Tabs.Root class={styles.Root} defaultValue="account">
  <Tabs.List class={styles.List}>
    <Tabs.Trigger class={styles.Trigger} value="account">Account</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="password" disabled>Password</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content class={styles.Content} value="account">Make changes to your account here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="password">Change your password here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="billing">Manage your billing and payment details.</Tabs.Content>
</Tabs.Root>

```

### Vertical

The default orientation of the tabs is `horizontal`. To change the orientation, set the `orientation` prop to
`vertical`.

**Example: vertical**

#### React

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import styles from 'styles/tabs.module.css'

export const Vertical = () => (
  <Tabs.Root className={styles.Root} orientation="vertical" defaultValue="account">
    <Tabs.List className={styles.List}>
      <Tabs.Trigger className={styles.Trigger} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="billing">
        Billing
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content className={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Solid

```tsx
import { Tabs } from '@ark-ui/solid/tabs'
import styles from 'styles/tabs.module.css'

export const Vertical = () => (
  <Tabs.Root class={styles.Root} orientation="vertical" defaultValue="account">
    <Tabs.List class={styles.List}>
      <Tabs.Trigger class={styles.Trigger} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="billing">
        Billing
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content class={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Tabs } from '@ark-ui/vue/tabs'
import styles from 'styles/tabs.module.css'
</script>

<template>
  <Tabs.Root :class="styles.Root" orientation="vertical" default-value="account">
    <Tabs.List :class="styles.List">
      <Tabs.Trigger :class="styles.Trigger" value="account">Account</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="password">Password</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="billing">Billing</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content :class="styles.Content" value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="password">Change your password here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="billing">Manage your billing and payment details.</Tabs.Content>
  </Tabs.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Tabs } from '@ark-ui/svelte/tabs'
  import styles from 'styles/tabs.module.css'
</script>

<Tabs.Root class={styles.Root} orientation="vertical" defaultValue="account">
  <Tabs.List class={styles.List}>
    <Tabs.Trigger class={styles.Trigger} value="account">Account</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="password">Password</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content class={styles.Content} value="account">Make changes to your account here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="password">Change your password here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="billing">Manage your billing and payment details.</Tabs.Content>
</Tabs.Root>

```

### Lazy Mount

Lazy mounting is a feature that allows the content of a tab to be rendered only when the tab is first activated. This is
useful for performance optimization, especially when tab content is large or complex. To enable lazy mounting, use the
`lazyMount` prop on the `Tabs.Content` component.

In addition, the `unmountOnExit` prop can be used in conjunction with `lazyMount` to unmount the tab content when the
tab is deactivated, freeing up resources. The next time the tab is activated, its content will be re-rendered.

**Example: lazy-mount**

#### React

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import styles from 'styles/tabs.module.css'

export const LazyMount = () => (
  <Tabs.Root className={styles.Root} lazyMount unmountOnExit defaultValue="account">
    <Tabs.List className={styles.List}>
      <Tabs.Trigger className={styles.TriggerIndicator} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.TriggerIndicator} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.TriggerIndicator} value="billing">
        Billing
      </Tabs.Trigger>
      <Tabs.Indicator className={styles.Indicator} />
    </Tabs.List>
    <Tabs.Content className={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Solid

```tsx
import { Tabs } from '@ark-ui/solid/tabs'
import styles from 'styles/tabs.module.css'

export const LazyMount = () => (
  <Tabs.Root class={styles.Root} lazyMount unmountOnExit defaultValue="account">
    <Tabs.List class={styles.List}>
      <Tabs.Trigger class={styles.TriggerIndicator} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.TriggerIndicator} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.TriggerIndicator} value="billing">
        Billing
      </Tabs.Trigger>
      <Tabs.Indicator class={styles.Indicator} />
    </Tabs.List>
    <Tabs.Content class={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Tabs } from '@ark-ui/vue/tabs'
import styles from 'styles/tabs.module.css'
</script>

<template>
  <Tabs.Root :class="styles.Root" lazy-mount unmount-on-exit default-value="account">
    <Tabs.List :class="styles.List">
      <Tabs.Trigger :class="styles.TriggerIndicator" value="account">Account</Tabs.Trigger>
      <Tabs.Trigger :class="styles.TriggerIndicator" value="password">Password</Tabs.Trigger>
      <Tabs.Trigger :class="styles.TriggerIndicator" value="billing">Billing</Tabs.Trigger>
      <Tabs.Indicator :class="styles.Indicator" />
    </Tabs.List>
    <Tabs.Content :class="styles.Content" value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="password">Change your password here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="billing">Manage your billing and payment details.</Tabs.Content>
  </Tabs.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Tabs } from '@ark-ui/svelte/tabs'
  import styles from 'styles/tabs.module.css'
</script>

<Tabs.Root class={styles.Root} lazyMount unmountOnExit defaultValue="account">
  <Tabs.List class={styles.List}>
    <Tabs.Trigger class={styles.TriggerIndicator} value="account">Account</Tabs.Trigger>
    <Tabs.Trigger class={styles.TriggerIndicator} value="password">Password</Tabs.Trigger>
    <Tabs.Trigger class={styles.TriggerIndicator} value="billing">Billing</Tabs.Trigger>
    <Tabs.Indicator class={styles.Indicator} />
  </Tabs.List>
  <Tabs.Content class={styles.Content} value="account">Make changes to your account here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="password">Change your password here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="billing">Manage your billing and payment details.</Tabs.Content>
</Tabs.Root>

```

### Manual Activation

By default, the tab can be selected when it receives focus from either the keyboard or pointer interaction. This is
called automatic tab activation.

In contrast, manual tab activation means the tab is selected with the

<kbd>Enter</kbd> key or by clicking on the tab.

**Example: manual-activation**

#### React

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import styles from 'styles/tabs.module.css'

export const ManualActivation = () => (
  <Tabs.Root className={styles.Root} activationMode="manual" defaultValue="account">
    <Tabs.List className={styles.List}>
      <Tabs.Trigger className={styles.Trigger} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="billing">
        Billing
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content className={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Solid

```tsx
import { Tabs } from '@ark-ui/solid/tabs'
import styles from 'styles/tabs.module.css'

export const ManualActivation = () => (
  <Tabs.Root class={styles.Root} activationMode="manual" defaultValue="account">
    <Tabs.List class={styles.List}>
      <Tabs.Trigger class={styles.Trigger} value="account">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="password">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger class={styles.Trigger} value="billing">
        Billing
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content class={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content class={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Tabs } from '@ark-ui/vue/tabs'
import styles from 'styles/tabs.module.css'
</script>

<template>
  <Tabs.Root :class="styles.Root" activation-mode="manual" default-value="account">
    <Tabs.List :class="styles.List">
      <Tabs.Trigger :class="styles.Trigger" value="account">Account</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="password">Password</Tabs.Trigger>
      <Tabs.Trigger :class="styles.Trigger" value="billing">Billing</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content :class="styles.Content" value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="password">Change your password here.</Tabs.Content>
    <Tabs.Content :class="styles.Content" value="billing">Manage your billing and payment details.</Tabs.Content>
  </Tabs.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Tabs } from '@ark-ui/svelte/tabs'
  import styles from 'styles/tabs.module.css'
</script>

<Tabs.Root class={styles.Root} activationMode="manual" defaultValue="account">
  <Tabs.List class={styles.List}>
    <Tabs.Trigger class={styles.Trigger} value="account">Account</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="password">Password</Tabs.Trigger>
    <Tabs.Trigger class={styles.Trigger} value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content class={styles.Content} value="account">Make changes to your account here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="password">Change your password here.</Tabs.Content>
  <Tabs.Content class={styles.Content} value="billing">Manage your billing and payment details.</Tabs.Content>
</Tabs.Root>

```

### Links

Use the `asChild` prop to render tab triggers as anchor links. This is useful for SEO and allows tabs to work with
browser navigation.

**Example: links**

#### React

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import styles from 'styles/tabs.module.css'

export const Links = () => (
  <Tabs.Root className={styles.Root} defaultValue="account">
    <Tabs.List className={styles.List}>
      <Tabs.Trigger className={styles.Trigger} value="account" asChild>
        <a href="#account">Account</a>
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="password" asChild>
        <a href="#password">Password</a>
      </Tabs.Trigger>
      <Tabs.Trigger className={styles.Trigger} value="billing" asChild>
        <a href="#billing">Billing</a>
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content className={styles.Content} value="account">
      Make changes to your account here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="password">
      Change your password here.
    </Tabs.Content>
    <Tabs.Content className={styles.Content} value="billing">
      Manage your billing and payment details.
    </Tabs.Content>
  </Tabs.Root>
)

```

## Guides

### Router Integration

When using frameworks like Next.js, Remix, or React Router, controlling the active tabs based on the URL can be useful.

To achieve this, you need to do two things:

- Set the `value` prop to the current URL path.
- Listen to the `onValueChange` event and update the URL path.

Here's an example using Remix Router

```tsx
import { Tabs } from '@ark-ui/<framework>/tabs'
import { useLocation, useNavigate, Link } from '@remix-run/react'

export default function App() {
  const { pathname } = useLocation()
  const navigate = useNavigate()
  const lastPathFragment = pathname.substring(pathname.lastIndexOf('/') + 1)
  const activeTab = lastPathFragment.length > 0 ? lastPathFragment : 'homepage'

  return (
    <Tabs.Root
      value={activeTab}
      onValueChange={({ value }) => {
        navigate(`/${value === 'home' ? '' : value}`)
      }}
    >
      <Tabs.List>
        <Tabs.Trigger asChild value="home">
          <Link to="">Home</Link>
        </Tabs.Trigger>
        <Tabs.Trigger asChild value="page-1">
          <Link to="page-1">Page 1</Link>
        </Tabs.Trigger>
        <Tabs.Trigger asChild value="page-2">
          <Link to="page-2">Page 2</Link>
        </Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  )
}
```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `activationMode` | `'manual' | 'automatic'` | No | 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` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `composite` | `boolean` | No | Whether the tab is composite |
| `defaultValue` | `string` | No | The initial selected tab value when rendered.
Use when you don't need to control the selected tab value. |
| `deselectable` | `boolean` | No | Whether the active tab can be deselected when clicking on it. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  trigger: (value: string) => string
  list: string
  content: (value: string) => string
  indicator: string
}>` | No | The ids of the elements in the tabs. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `loopFocus` | `boolean` | No | Whether the keyboard navigation will loop from last tab to first, and vice versa. |
| `navigate` | `(details: NavigateDetails) => void` | No | Function to navigate to the selected tab when clicking on it.
Useful if tab triggers are anchor elements. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Callback to be called when the focused tab changes |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback to be called when the selected/active tab changes |
| `orientation` | `'horizontal' | 'vertical'` | No | 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` | `IntlTranslations` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string` | No | The controlled selected tab value |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tabs |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the tabs |
| `[data-focus]` | Present when focused |


**TabContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the tab |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabList Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the tab |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the tab is disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseTabsReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `activationMode` | `'manual' | 'automatic'` | No | 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: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `composite` | `boolean` | No | Whether the tab is composite |
| `defaultValue` | `string` | No | The initial selected tab value when rendered.
Use when you don't need to control the selected tab value. |
| `deselectable` | `boolean` | No | Whether the active tab can be deselected when clicking on it. |
| `ids` | `Partial<{
  root: string
  trigger: (value: string) => string
  list: string
  content: (value: string) => string
  indicator: string
}>` | No | The ids of the elements in the tabs. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `loopFocus` | `boolean` | No | Whether the keyboard navigation will loop from last tab to first, and vice versa. |
| `navigate` | `(details: NavigateDetails) => void` | No | Function to navigate to the selected tab when clicking on it.
Useful if tab triggers are anchor elements. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Callback to be called when the focused tab changes |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback to be called when the selected/active tab changes |
| `orientation` | `'horizontal' | 'vertical'` | No | 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` | `IntlTranslations` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string` | No | The controlled selected tab value |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tabs |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the tabs |
| `[data-focus]` | Present when focused |


**TabContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the tab |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabList Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the tab |
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the tab is disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseTabsReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `activationMode` | `'manual' | 'automatic'` | No | 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` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `composite` | `boolean` | No | Whether the tab is composite |
| `defaultValue` | `string` | No | The initial selected tab value when rendered.
Use when you don't need to control the selected tab value. |
| `deselectable` | `boolean` | No | Whether the active tab can be deselected when clicking on it. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  trigger: (id: string) => string
  content: (id: string) => string
  list: string
  indicator: string
}>` | No | The ids of the elements in the tabs. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `loopFocus` | `boolean` | No | Whether the keyboard navigation will loop from last tab to first, and vice versa. |
| `modelValue` | `string` | No | The v-model value of the tabs |
| `navigate` | `(details: NavigateDetails) => void` | No | Function to navigate to the selected tab when clicking on it.
Useful if tab triggers are anchor elements. |
| `orientation` | `'horizontal' | 'vertical'` | No | 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` | `IntlTranslations` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tabs |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the tabs |
| `[data-focus]` | Present when focused |


**TabContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the tab |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabList Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TabTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the tab |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the tab is disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `TabsApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `activationMode` | `'manual' | 'automatic'` | No | 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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `composite` | `boolean` | No | Whether the tab is composite |
| `defaultValue` | `string` | No | The initial selected tab value when rendered.
Use when you don't need to control the selected tab value. |
| `deselectable` | `boolean` | No | Whether the active tab can be deselected when clicking on it. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  trigger: (value: string) => string
  list: string
  content: (value: string) => string
  indicator: string
}>` | No | The ids of the elements in the tabs. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `loopFocus` | `boolean` | No | Whether the keyboard navigation will loop from last tab to first, and vice versa. |
| `navigate` | `(details: NavigateDetails) => void` | No | Function to navigate to the selected tab when clicking on it.
Useful if tab triggers are anchor elements. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Callback to be called when the focused tab changes |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback to be called when the selected/active tab changes |
| `orientation` | `'horizontal' | 'vertical'` | No | 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. |
| `ref` | `Element` | No |  |
| `translations` | `IntlTranslations` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string` | No | The controlled selected tab value |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tabs |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the tabs |
| `[data-focus]` | Present when focused |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseTabsContext]>` | Yes |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseTabsReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `ref` | `Element` | No |  |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `string` | The current value of the tabs. |
| `focusedValue` | `string` | The value of the tab that is currently focused. |
| `setValue` | `(value: string) => void` | Sets the value of the tabs. |
| `clearValue` | `VoidFunction` | Clears the value of the tabs. |
| `setIndicatorRect` | `(value: string) => void` | Sets the indicator rect to the tab with the given value |
| `syncTabIndex` | `VoidFunction` | Synchronizes the tab index of the content element.
Useful when rendering tabs within a select or combobox |
| `focus` | `VoidFunction` | Set focus on the selected tab trigger |
| `selectNext` | `(fromValue?: string) => void` | Selects the next tab |
| `selectPrev` | `(fromValue?: string) => void` | Selects the previous tab |
| `getTriggerState` | `(props: TriggerProps) => TriggerState` | Returns the state of the trigger with the given props |


## Accessibility

Complies with the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

### Keyboard Support

<KeyBindingsTable id="tabs" />