<dt-tab-group label="Label Example Group"> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> </template> </dt-tab-group>
Remove the bottom border of any tablist.
<dt-tab-group label="Label Example Group" borderless> ... </dt-tab-group>
All tabs render as muted buttons. The selected tab is distinguished with active styling.
<dt-tab-group label="Label Example Group" kind="muted"> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> </template> </dt-tab-group>
The selected tab renders with an outlined border instead of a filled style.
<dt-tab-group label="Label Example Group" outlined> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> </template> </dt-tab-group>
Combines muted kind with outlined selected state.
<dt-tab-group label="Label Example Group" kind="muted" outlined> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> </template> </dt-tab-group>
Add disabled to a specific tab.
<dt-tab-group label="Label Example Group"> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> <dt-tab id="7" panel-id="8" disabled>Fourth tab</dt-tab> </template> </dt-tab-group>
Add disabled to the tab group to disable all.
<dt-tab-group label="Label Example Group" disabled> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> </template> </dt-tab-group>
In place of the inverted prop, use the v-dt-mode directive on the component element.
<dt-tab-group label="Label Example Group" v-dt-mode:invert> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> </template> </dt-tab-group>
Control how tabs distribute available horizontal space within the tab list. It only applies to horizontal tabs, and has no effect with orientation="vertical".
Tabs expand proportionally to fill the container. Longer labels receive more space.
<dt-tab-group label="Label Example Group" spread="grow"> <template #tabs> <dt-tab id="sg1" panel-id="sg2" selected>Tab 1</dt-tab> <dt-tab id="sg3" panel-id="sg4">Tab the second</dt-tab> <dt-tab id="sg5" panel-id="sg6">Tab the third</dt-tab> </template> </dt-tab-group>
All tabs share the same width, regardless of label length.
<dt-tab-group label="Label Example Group" spread="equal"> <template #tabs> <dt-tab id="se1" panel-id="se2" selected>Tab 1</dt-tab> <dt-tab id="se3" panel-id="se4">Tab the second</dt-tab> <dt-tab id="se5" panel-id="se6">Tab the third</dt-tab> </template> </dt-tab-group>
<dt-tab-group label="Label Example Group" :size="100|200|300|400|500"> ... </dt-tab-group>
Use the #startIcon or #endIcon slot on dt-tab to add an icon. The slot provides iconSize to match the tab's size.
<dt-tab-group label="Label Example Group"> <template #tabs> <dt-tab id="1" panel-id="2" selected> First <template #startIcon="{ iconSize }"> <dt-icon name="box-select" :size="iconSize" /> </template> </dt-tab> <dt-tab id="3" panel-id="4"> Second <template #startIcon="{ iconSize }"> <dt-icon name="box-select" :size="iconSize" /> </template> <template #endIcon="{ iconSize }"> <dt-icon name="box-select" :size="iconSize" /> </template> </dt-tab> <dt-tab id="5" panel-id="6"> Third <template #endIcon="{ iconSize }"> <dt-icon name="box-select" :size="iconSize" /> </template> </dt-tab> </template> </dt-tab-group>
Use the #leading and #trailing slots on dt-tab to render content like badges or count indicators alongside tab labels. Use leading-class and trailing-class to adjust padding.
<dt-tab-group label="Label Example Group"> <template #tabs> <dt-tab id="lt1" panel-id="lt2" selected trailing-class="d-pie-100"> Inbox <template #trailing> <dt-badge kind="count" type="bulletin" text="9" /> </template> </dt-tab> <dt-tab id="lt3" panel-id="lt4" trailing-class="d-pie-100"> Archive <template #trailing> <dt-badge kind="count" text="99+" /> </template> </dt-tab> <dt-tab id="lt5" panel-id="lt6"> Drafts </dt-tab> </template> </dt-tab-group>
Set orientation="vertical" to stack tabs vertically alongside the panel.
<dt-tab-group label="Label Example Group" orientation="vertical"> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> </template> </dt-tab-group>
By default, tabs use manual activation — the user must press Enter or Space after focusing a tab to select it. Set activation-mode="auto" to select tabs immediately on focus via arrow keys, following the WAI-ARIA Tabs pattern.
<dt-tab-group label="Label Example Group" activation-mode="auto"> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> </template> </dt-tab-group>
If you need to do some validation before changing tabs, you can use the before-change event. If the event handler is prevented, the tab change will be cancelled.
<dt-tab-group label="Label Example Group" @before-change="confirmBeforeLeave"> <template #tabs> <dt-tab id="1" panel-id="2" selected>First tab</dt-tab> <dt-tab id="3" panel-id="4">Second tab</dt-tab> <dt-tab id="5" panel-id="6">Third tab</dt-tab> </template> </dt-tab-group> <script setup> function confirmBeforeLeave (event) { const confirmed = confirm("Are you sure to change tab?"); if (!confirmed) { event.preventDefault(); } } </script>
To create accessible tabs, be sure to implement the proper keyboard navigation and utilize the following ARIA roles to properly declare element roles, content relationships, and current status:
Item
|
Applies to
|
Description
|
|---|
import { DtTabGroup, DtTab, DtTabPanel } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | Default slot for Panel |
tabs | Slot for Tabs |
Name
|
Default
|
Type
|
|---|---|---|
activationMode | 'manual' |
"auto"
|
"manual"
Controls whether tabs are selected on focus (auto) or on click/keypress (manual) |
borderless | false |
"true"
|
"false"
If true, applies borderless styles to the tab group |
disabled | false |
"true"
|
"false"
If true, disables the tab group |
kind | 'default' |
"default"
|
"muted"
The visual style kind applied to tabs within this group.
Maps to specific DtButton kind/importance combinations for selected/unselected states. |
label | '' | string Identifies the tab group |
orientation | 'horizontal' |
"horizontal"
|
"vertical"
The orientation of the tab list |
outlined | false |
"true"
|
"false"
If true, the selected tab renders with outlined importance instead of clear. |
selected | '' | string The id of the selected tab panel which should be displayed |
showIndicatorTransition | true |
"true"
|
"false"
If true, the selection indicator animates between tabs on click. |
size | 300 |
"100"
|
"200"
|
"300"
|
"400"
|
"500"
If provided, applies size styles to the tab group |
spread | 'none' |
"none"
|
"grow"
|
"equal"
Controls how tabs distribute available space within the tab list. |
tabListChildProps | {} | object Pass through props, used to customize the tab list |
tabsClass | '' | string|array|object Pass through classes, used to customize the tab list |
inverted Deprecated | false |
"true"
|
"false"
If true, applies inverted styles to the tab group Use v-dt-mode directive instead. |
tabListClass Deprecated | string|array|object Pass through classes, used to customize the tab list Use tabsClass |
Name
|
Type
|
|---|---|
before-change | undefined Before change tab event, useful to perform validations and prevent changing tabs if necessary. |
change | Object Change tab event with the arguments: selected id of the current tab and disabled value |
Name
|
Type
|
|---|---|
default | Default slot for Tab Panel |
Name
|
Default
|
Type
|
|---|---|---|
id
required
| string Id of the panel | |
tabId
required
| string Id of the associated tab | |
hidden | false |
"true"
|
"false"
If true, hides the tab content |
tabPanelClass | '' | string|array|object Used to customize the tab element |
Name
|
Type
|
|---|---|
default | default slot, defaults contains dt-button |
endIcon | |
icon | |
leading | |
startIcon | |
trailing |
Name
|
Default
|
Type
|
|---|---|---|
id
required
| string Id of the tab | |
panelId
required
| string Id of the associated content panel | |
disabled | false |
"true"
|
"false"
If true, disables the tab |
label | '' | string Describes the tab |
labelClass | '' | string|array|object Used to customize the label container |
leadingClass | '' | string|array|object Used to customize the leading container |
selected | false |
"true"
|
"false"
Controls the state of the tab |
tabClass | '' | string|array|object Used to customize the tab element |
trailingClass | '' | string|array|object Used to customize the trailing container |
Name
|
Type
|
|---|---|
click | PointerEvent | KeyboardEvent Native button click event |
focus | FocusEvent Native button focus in event |
Class
|
Applies to
|
Description
|
|---|
Tabs documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope