Tabs
A set of layered sections of content, known as tab panels.
Preview
Account
Password
Account
Make changes to your account here.
Name
Password
Change your password here.
Current password
Usage
<ui-tabs defaultValue="account" class="max-w-[400px] w-full">
<ui-tabs-list>
<ui-tabs-trigger value="account">Account</ui-tabs-trigger>
<ui-tabs-trigger value="password">Password</ui-tabs-trigger>
</ui-tabs-list>
<ui-tabs-content value="account" class="mt-4">
<ui-card>
<ui-card-header>
<ui-card-title>Account</ui-card-title>
<ui-card-description>Make changes to your account here.</ui-card-description>
</ui-card-header>
<ui-card-content class="space-y-2">
<div class="space-y-1">
<ui-label>Name</ui-label>
<ui-input value="John Doe"></ui-input>
</div>
</ui-card-content>
</ui-card>
</ui-tabs-content>
<ui-tabs-content value="password" class="mt-4">
<ui-card>
<ui-card-header>
<ui-card-title>Password</ui-card-title>
<ui-card-description>Change your password here.</ui-card-description>
</ui-card-header>
<ui-card-content class="space-y-2">
<div class="space-y-1">
<ui-label>Current password</ui-label>
<ui-input type="password"></ui-input>
</div>
</ui-card-content>
</ui-card>
</ui-tabs-content>
</ui-tabs>
Sub-components
<ui-tabs> <ui-tabs-list> <ui-tabs-trigger> <ui-tabs-content>
Props
<ui-tabs>
| Prop | Type | Default | Description |
|---|
defaultValue | string | — | The default active tab. |
value | string | — | Controlled active tab. |
<ui-tabs-trigger> Custom wrapper
| Prop | Type | Default | Description |
|---|
value | string | — | The tab value. |
href | string | — | URL to navigate to. Renders as a link when set. (Custom prop) |
<ui-tabs-content>
| Prop | Type | Default | Description |
|---|
value | string | — | The content panel value. |
All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.