Tabs
Organizes content into distinct sections, allowing users to switch between them.
<script lang="ts">
import { Tabs } from "bits-ui";
import { Airplane } from "$icons/index.js";
</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 font-semibold leading-[0.01em] 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">
<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] font-semibold leading-none 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] font-semibold leading-none 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="border-1 relative top-4 h-px 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">
<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] font-semibold leading-none 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] font-semibold leading-none 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="border-1 relative top-4 h-px 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>
Prague
06:05
3h 30m
Malaga
06:05
Malaga
07:25
3h 20m
Prague
10:45
Structure
<script lang="ts">
import { Tabs } from "bits-ui";
</script>
<Tabs.Root>
<Tabs.List>
<Tabs.Trigger />
</Tabs.List>
<Tabs.Content />
</Tabs.Root>
API Reference
The root tabs component which contains the other tab components.
| Property | Type | Description |
|---|---|---|
value | union | The active tab value. Default:
undefined |
onValueChange | function | A callback function called when the active tab value changes. Default:
undefined |
activateOnFocus | boolean | Whether or not to activate the tab when it receives focus. Default:
true |
autoSet | boolean | Whether or not to automatically set the tab value when it receives focus. Default:
true |
loop | boolean | Whether or not the tabs should loop when navigating with the keyboard. Default:
true |
orientation | enum | The orientation of the tabs. Default:
horizontal |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
value | string | The currently active tab value. |
| Data Attribute | Value | Description |
|---|---|---|
data-orientation | 'horizontal' | 'vertical' | The orientation of the tabs. |
data-tabs-root | —— | Present on the root element. |
The component containing the tab triggers.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-orientation | 'horizontal' | 'vertical' | The orientation of the tabs. |
data-tabs-list | —— | Present on the list element. |
The trigger for a tab.
| Property | Type | Description |
|---|---|---|
value * Required | string | The value of the tab this trigger represents. Default:
undefined |
disabled | boolean | Whether or not the tab is disabled. Default:
false |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLButtonElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The state of the tab trigger. |
data-value | —— | The value of the tab this trigger represents. |
data-orientation | enum | The orientation of the tabs. |
data-disabled | —— | Present when the tab trigger is disabled. |
data-tabs-trigger | —— | Present on the trigger elements. |
The panel containing the contents of a tab.
| Property | Type | Description |
|---|---|---|
value * Required | string | The value of the tab this content represents. Default:
undefined |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-tabs-content | —— | Present on the content elements. |