Tabs
Organizes content into distinct sections, allowing users to switch between them.
<script lang="ts">
import { Tabs, Label, Button } from "$lib";
import { LockKeyOpen } from "phosphor-svelte";
</script>
<div class="pt-6">
<Tabs.Root
value="login"
class="w-[428px] rounded-card border border-muted bg-background p-6 shadow-card"
>
<Tabs.List
class="grid w-full grid-cols-2 gap-1 rounded-9px bg-dark-4 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset"
>
<Tabs.Trigger
value="login"
class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
>Login</Tabs.Trigger
>
<Tabs.Trigger
value="register"
class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
>Register</Tabs.Trigger
>
</Tabs.List>
<Tabs.Content value="login" class="pt-6">
<div class="flex flex-col">
<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
Login to your account
</h4>
<p class="text-sm font-medium text-muted-foreground">
to access all your data
</p>
</div>
<div class="flex flex-col gap-4 pt-5 text-sm">
<div class="flex flex-col gap-1">
<Label.Root for="username" class="font-medium text-foreground">
Username
</Label.Root>
<input
type="text"
id="username"
placeholder="name@example.com"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 placeholder:text-foreground-alt/50"
/>
</div>
<div class="flex flex-col gap-1">
<Label.Root for="password" class="font-medium text-foreground">
Password
</Label.Root>
<div class="relative w-full">
<input
id="password"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 placeholder:text-foreground-alt/50"
placeholder="super_secret"
type="password"
autocomplete="off"
/>
<LockKeyOpen
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
/>
</div>
</div>
</div>
<Button.Root
class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini"
>
Login
</Button.Root>
</Tabs.Content>
<Tabs.Content value="register" class="pt-6">
<div class="flex flex-col">
<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
Register for an account
</h4>
<p class="text-sm font-medium text-muted-foreground">
to start using all our features
</p>
</div>
<div class="flex flex-col gap-4 pt-5">
<div class="flex flex-col gap-1">
<Label.Root
for="registerUsername"
class="text-sm font-medium text-foreground"
>
Username
</Label.Root>
<input
type="text"
id="registerUsername"
placeholder="name@example.com"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
/>
</div>
<div class="flex flex-col gap-1">
<Label.Root
for="registerPassword"
class="text-sm font-medium text-foreground"
>
Password
</Label.Root>
<div class="relative w-full">
<input
id="registerPassword"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
placeholder="super_secret"
type="password"
autocomplete="off"
/>
<LockKeyOpen
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
/>
</div>
</div>
<div class="flex flex-col gap-1">
<Label.Root
for="passwordConfirm"
class="text-sm font-medium text-foreground"
>
Confirm Password
</Label.Root>
<div class="relative w-full">
<input
id="passwordConfirm"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
placeholder="super_secret"
type="password"
autocomplete="off"
/>
<LockKeyOpen
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
/>
</div>
</div>
</div>
<Button.Root
class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini"
>
Login
</Button.Root>
</Tabs.Content>
</Tabs.Root>
</div>
<script lang="ts">
import { Tabs, Label, Button } from "$lib";
import { LockKeyOpen } from "phosphor-svelte";
</script>
<div class="pt-6">
<Tabs.Root
value="login"
class="w-[428px] rounded-card border border-muted bg-background p-6 shadow-card"
>
<Tabs.List
class="grid w-full grid-cols-2 gap-1 rounded-9px bg-dark-4 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset"
>
<Tabs.Trigger
value="login"
class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
>Login</Tabs.Trigger
>
<Tabs.Trigger
value="register"
class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
>Register</Tabs.Trigger
>
</Tabs.List>
<Tabs.Content value="login" class="pt-6">
<div class="flex flex-col">
<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
Login to your account
</h4>
<p class="text-sm font-medium text-muted-foreground">
to access all your data
</p>
</div>
<div class="flex flex-col gap-4 pt-5 text-sm">
<div class="flex flex-col gap-1">
<Label.Root for="username" class="font-medium text-foreground">
Username
</Label.Root>
<input
type="text"
id="username"
placeholder="name@example.com"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 placeholder:text-foreground-alt/50"
/>
</div>
<div class="flex flex-col gap-1">
<Label.Root for="password" class="font-medium text-foreground">
Password
</Label.Root>
<div class="relative w-full">
<input
id="password"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 placeholder:text-foreground-alt/50"
placeholder="super_secret"
type="password"
autocomplete="off"
/>
<LockKeyOpen
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
/>
</div>
</div>
</div>
<Button.Root
class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini"
>
Login
</Button.Root>
</Tabs.Content>
<Tabs.Content value="register" class="pt-6">
<div class="flex flex-col">
<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
Register for an account
</h4>
<p class="text-sm font-medium text-muted-foreground">
to start using all our features
</p>
</div>
<div class="flex flex-col gap-4 pt-5">
<div class="flex flex-col gap-1">
<Label.Root
for="registerUsername"
class="text-sm font-medium text-foreground"
>
Username
</Label.Root>
<input
type="text"
id="registerUsername"
placeholder="name@example.com"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
/>
</div>
<div class="flex flex-col gap-1">
<Label.Root
for="registerPassword"
class="text-sm font-medium text-foreground"
>
Password
</Label.Root>
<div class="relative w-full">
<input
id="registerPassword"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
placeholder="super_secret"
type="password"
autocomplete="off"
/>
<LockKeyOpen
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
/>
</div>
</div>
<div class="flex flex-col gap-1">
<Label.Root
for="passwordConfirm"
class="text-sm font-medium text-foreground"
>
Confirm Password
</Label.Root>
<div class="relative w-full">
<input
id="passwordConfirm"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
placeholder="super_secret"
type="password"
autocomplete="off"
/>
<LockKeyOpen
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
/>
</div>
</div>
</div>
<Button.Root
class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini"
>
Login
</Button.Root>
</Tabs.Content>
</Tabs.Root>
</div>
Login to your account
to access all your data
Register for an account
to start using all our features
Structure
<script lang="ts">
import { Tabs } from "bits-ui";
</script>
<Tabs.Root>
<Tabs.List>
<Tabs.Trigger />
</Tabs.List>
<Tabs.Content />
</Tabs.Root>
<script lang="ts">
import { Tabs } from "bits-ui";
</script>
<Tabs.Root>
<Tabs.List>
<Tabs.Trigger />
</Tabs.List>
<Tabs.Content />
</Tabs.Root>
Component API
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 |
| 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 |
| 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 |
| 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 |
| 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. |
🚧 UNDER CONSTRUCTION 🚧