Tabs
Organizes content into distinct sections, allowing users to switch between them.
Prague
06:05
3h 30m
Malaga
06:05
Malaga
07:25
3h 20m
Prague
10:45
Structure
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. |