Tabs
A rendeless component for organize content into sections. Switch between views by clicking tab trigger. Supports active state, dynamic content, and keyboard navigation and more.
View source
API Reference
TabRoot
| Property | Type | Default | Description |
|---|---|---|---|
children Snippet | Snippet | Tab Root content to render | |
disabled | boolean | false | Disable all tabs |
loop | boolean | false | Loop when navigating with the keyboard |
onValueChange | TabsSelectionValueChange | Callback when value change | |
orientation | union | "horizontal" | Tabs orientation |
selectWhenFocused | boolean | true | Activate tabs when focused |
value $bindable | TabsSelectionValue | Current active tab value |
TabList
| Property | Type | Default | Description |
|---|---|---|---|
children Snippet | Snippet | Tab List content to render |
TabTrigger
| Property | Type | Default | Description |
|---|---|---|---|
children Snippet | Snippet | Tab trigger content to render | |
disabled | boolean | false | Disable tab |
value required | TabsValue | Unique Tab identifier. Must be the same as TabContent value |
TabContent
| Property | Type | Default | Description |
|---|---|---|---|
children Snippet | Snippet | Tab content to render | |
value required | TabsValue | Unique Tab identifier. Must be the same as TabTrigger value |
Type Definitions
export type TabsSelectionValueChange = (value: TabsSelectionValue) => void;
export type TabsRootSnippetProps = {
readonly orientation: Orientation;
readonly attrs: Record<string, unknown>;
};
export type TabsListSnippetProps = {
readonly orientation: Orientation;
readonly attrs: Record<string, unknown>;
};
export type TabsTriggerSnippetProps = {
readonly active: boolean;
readonly disabled: boolean;
readonly orientation: Orientation;
readonly attrs: Record<string, unknown>;
};
export type TabsContentSnippetProps = {
readonly active: boolean;
readonly disabled: boolean;
readonly orientation: Orientation;
readonly attrs: Record<string, unknown>;
};Examples
Vertical
Example using other components from the library.
In controlled mode and with multiple/loop enabled.