Tabs
Switch between related panels.
Usage
Import the namespace and compose Tabs.Root, Tabs.List, Tabs.Trigger, and Tabs.Content. Use bind:value to track the active
tab.
Manage your account details.
Change your password here.
Invite and manage team members.
Props
Tabs.Root
| Prop | Type | Default |
|---|---|---|
class | string | — |
activationMode bits-ui How the tabs should be activated. If set to `'automatic'`, the tabs will be activated when the trigger is focused. If set to `'manual'`, the tabs will be activated when the trigger is pressed. | TabsActivationMode | undefined | "automatic" |
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
disabled bits-ui Whether the tabs are disabled or not. | boolean | undefined | false |
id bits-ui | string | undefined | — |
loop bits-ui Whether to loop through the tabs when reaching the end when using the keyboard. | boolean | undefined | false |
onValueChange bits-ui A callback function called when the selected tab changes. | OnChangeFn<string> | undefined | — |
orientation bits-ui The orientation of the tabs. | Orientation | undefined | "horizontal" |
ref bits-ui | HTMLElement | null | undefined | — |
value bits-ui The value of the selected tab. | string | undefined | — |
Tabs.List
| Prop | Type | Default |
|---|---|---|
class | string | — |
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
id bits-ui | string | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
Tabs.Trigger
| Prop | Type | Default |
|---|---|---|
class | string | — |
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
disabled bits-ui Whether the trigger is disabled or not. | boolean | null | undefined | false |
id bits-ui | string | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
value required bits-ui The value of the tab associated with this trigger. | string | — |
Tabs.Content
| Prop | Type | Default |
|---|---|---|
class | string | — |
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
id bits-ui | string | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
value required bits-ui The value of the tab associated with this content. | string | — |
Props for Tabs.Root. Tabs.Trigger and Tabs.Content require a matching value string.
All parts accept class for custom overrides.