Tabs

Organizes content into tabbed sections.

Epicenter

Local-first, open source apps

Special Sponsor

Prague

06:05

3h 30m

Malaga

06:05

	<script lang="ts">
  import { Tabs } from "bits-ui";
  import Airplane from "phosphor-svelte/lib/Airplane";
</script>
 
<div class="pt-6">
  <Tabs.Root
    value="outbound"
    class="w-[390px] rounded-card border border-muted bg-background-alt p-3 shadow-card"
  >
    <Tabs.List
      class="grid w-full grid-cols-2 gap-1 rounded-9px bg-dark-10 p-1 text-sm leading-[0.01em] font-semibold shadow-mini-inset dark:border dark:border-neutral-600/30 dark:bg-background"
    >
      <Tabs.Trigger
        value="outbound"
        class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted"
        >Outbound</Tabs.Trigger
      >
      <Tabs.Trigger
        value="inbound"
        class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted"
        >Inbound</Tabs.Trigger
      >
    </Tabs.List>
    <Tabs.Content value="outbound" class="pt-3 select-none">
      <div class="grid grid-cols-3 grid-rows-2 gap-0 p-4 pb-1">
        <div class="text-left">
          <h4
            class="mb-2 text-[20px] leading-none font-semibold tracking-[-0.01em]"
          >
            Prague
          </h4>
          <p class="text-sm font-medium text-muted-foreground">06:05</p>
        </div>
        <div class="self-end text-center">
          <p class="text-sm font-medium text-muted-foreground">3h 30m</p>
        </div>
        <div class="text-right">
          <h4
            class="mb-2 text-[20px] leading-none font-semibold tracking-[-0.01em]"
          >
            Malaga
          </h4>
          <p class="text-sm font-medium text-muted-foreground">06:05</p>
        </div>
        <div class="relative col-span-3">
          <hr
            class="relative top-4 h-px border-1 border-dashed border-border-input"
          />
 
          <div class="absolute left-1/2 -translate-x-1/2 bg-background-alt p-1">
            <Airplane class="size-6 rotate-90 text-muted-foreground" />
          </div>
        </div>
      </div>
    </Tabs.Content>
    <Tabs.Content value="inbound" class="pt-3 select-none">
      <div class="grid grid-cols-3 grid-rows-2 gap-0 p-4 pb-1">
        <div class="text-left">
          <h4
            class="mb-2 text-[20px] leading-none font-semibold tracking-[-0.01em]"
          >
            Malaga
          </h4>
          <p class="text-sm font-medium text-muted-foreground">07:25</p>
        </div>
        <div class="self-end text-center">
          <p class="text-sm font-medium text-muted-foreground">3h 20m</p>
        </div>
        <div class="text-right">
          <h4
            class="mb-2 text-[20px] leading-none font-semibold tracking-[-0.01em]"
          >
            Prague
          </h4>
          <p class="text-sm font-medium text-muted-foreground">10:45</p>
        </div>
        <div class="relative col-span-3">
          <hr
            class="relative top-4 h-px border-1 border-dashed border-border-input"
          />
 
          <div class="absolute left-1/2 -translate-x-1/2 bg-background-alt p-1">
            <Airplane class="size-6 rotate-90 text-muted-foreground" />
          </div>
        </div>
      </div>
    </Tabs.Content>
  </Tabs.Root>
</div>

Structure

	<script lang="ts">
  import { Tabs } from "bits-ui";
</script>
 
<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

Managing Value State

This section covers how to manage the value state of the component.

Two-Way Binding

Use bind:value for simple, automatic state synchronization:

	<script lang="ts">
  import { Tabs } from "bits-ui";
  let myValue = $state("");
</script>
 
<button onclick={() => (myValue = "tab-1")}> Activate tab 1 </button>
 
<Tabs.Root bind:value={myValue}>
  <!-- -->
</Tabs.Root>

Fully Controlled

Use a Function Binding for complete control over the state's reads and writes.

	<script lang="ts">
  import { Tabs } from "bits-ui";
  let myValue = $state("");
 
  function getValue() {
    return myValue;
  }
 
  function setValue(newValue: string) {
    myValue = newValue;
  }
</script>
 
<Tabs.Root bind:value={getValue, setValue}>
  <!-- ... -->
</Tabs.Root>

Orientation

The orientation prop is used to determine the orientation of the Tabs component, which influences how keyboard navigation will work.

When the orientation is set to 'horizontal', the ArrowLeft and ArrowRight keys will move the focus to the previous and next tab, respectively. When the orientation is set to 'vertical', the ArrowUp and ArrowDown keys will move the focus to the previous and next tab, respectively.

	<Tabs.Root orientation="horizontal">
  <!-- ... -->
</Tabs.Root>
 
<Tabs.Root orientation="vertical">
  <!-- ... -->
</Tabs.Root>

Activation Mode

By default, the Tabs component will automatically activate the tab associated with a trigger when that trigger is focused. This behavior can be disabled by setting the activationMode prop to 'manual'.

When set to 'manual', the user will need to activate the tab by pressing the trigger.

	<Tabs.Root activationMode="manual">
  <!-- ... -->
</Tabs.Root>

Panel Focus

Tabs.Content defaults to tabindex="0", so keyboard users can focus the panel. Keep this default when the panel has no focusable elements or its first meaningful content is not focusable, even if a button or link appears later.

When the first meaningful content is focusable, set tabindex={-1} to let Tab move directly to that element. Choose this based on your content, following the WAI-ARIA tabs pattern.

	<Tabs.Content value="settings" tabindex={-1}>
  <button>Update settings</button>
</Tabs.Content>

API Reference

Tabs.Root

The root tabs component which contains the other tab components.

Property Details
value
onValueChange
activationMode
disabled
loop
orientation
ref
children
child
Data Attribute Details
data-orientation
data-tabs-root

Tabs.List

The component containing the tab triggers.

Property Details
ref
children
child
Data Attribute Details
data-orientation
data-tabs-list

Tabs.Trigger

The trigger for a tab.

Property Details
value
disabled
ref
children
child
Data Attribute Details
data-state
data-value
data-orientation
data-disabled
data-tabs-trigger

Tabs.Content

The panel containing the contents of a tab.

Property Details
value
ref
children
child
Data Attribute Details
data-tabs-content
Previous Switch Next Time Field