Tabs

Tabs organize content into separate views where only one view is visible at a time. Each tab acts as a trigger for its associated panel.

The default navigation variant is a desktop-oriented navigation treatment with a contained shell and selected container. Use the transparent line variant for a lighter, compact tab bar with a text-width underline. Add divider to show a bottom divider, and combine it with divider-full-width to extend the divider across the Tabs root.

Tabs use content width by default. Use mode="fixed" only when tabs should divide and fill the available width, or mode="scrollable" when each tab should keep a minimum touch target and overflow horizontally.

Tabs is built on the useTabs composable — the interaction logic (keyboard navigation, ARIA attributes, value management) lives in the composable, while the component adds MD3 styling. See Composables for details.

Overview content

Examples

Default

Overview content

Line Variant

Line variant - Tab 1

Disabled Tab

Disabled tabs are removed from pointer interaction and keyboard tab order. Arrow-key navigation skips them.

Overview content

With Icons

Flight search results

Router-Style Links

Use the same RouterLink custom pattern as Button and ListItem, then pass the generated href and navigate handler into Tab.

OverviewSecurityNotifications

Profile, billing, and language settings.

Current route: /settings/overview

Headless (useTabs only)

Use the useTabs composable directly to build custom tab UIs without any predefined styling.

Content for tab1

Default tab icons follow the size-specific typography role and density. --md-tabs-icon-size sets an explicit final size.

Reference

Anatomy

Highlight

Element	Part	Selector
<component>	trigger	[data-scope="tabs"][data-part="trigger"] left_clickLMBCopy
<span>	trigger-content	[data-scope="tabs"][data-part="trigger-content"] left_clickLMBCopy
<span>	trigger-iconconditional	[data-scope="tabs"][data-part="trigger-icon"] left_clickLMBCopy
<span>	trigger-label	[data-scope="tabs"][data-part="trigger-label"] left_clickLMBCopy
<div>	list	[data-scope="tabs"][data-part="list"] left_clickLMBCopy
<span>	indicator	[data-scope="tabs"][data-part="indicator"] left_clickLMBCopy
<div>	panel	[data-scope="tabs"][data-part="panel"] left_clickLMBCopy
<div>	root	[data-scope="tabs"][data-part="root"] left_clickLMBCopy

Props

Name	Description	Default	Control
variantOptional	Visual variant of the tabs. navigationline	"navigation"	checknavigationline
dividerOptional	Whether the line variant shows a divider below the tab list. boolean | undefined	false
dividerFullWidthOptional	Whether the line variant divider spans the full width of the Tabs root. boolean | undefined	false
sizeOptional	Size of the tab triggers. extra-smallsmallmediumlargeextra-large	"medium"	extra-smallsmallcheckmediumlargeextra-large
modeOptional	Layout mode for the tab list. autofixedscrollable	"auto"	checkautofixedscrollable
orientationOptional	The orientation of the tab list. horizontalvertical	"horizontal"	horizontalvertical
loopOptional	Whether arrow-key navigation loops. boolean | undefined	true
selectWhenFocusedOptional	Whether focusing a trigger selects it. boolean | undefined	true
modelValueOptional	- string | undefined	-

Events1

Name	Type	Description
update:modelValue	[value: string | undefined]	-

Slots1

Name	Parameters	Description
default	-	Tabs content: Tab triggers and TabPanel components.

Styling79

Preview

Token	Description
--md-tabs-active-container-colorColor Fallbacktransparent	Controls active container color.
--md-tabs-active-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls active container elevation.
--md-tabs-active-container-outline-colorColor Fallbacktransparent	Controls active container outline color.
--md-tabs-active-container-outline-widthLayout Fallback0rem	Controls active container outline width.
--md-tabs-active-container-shapeShape Fallbackvar(--md-shape-docked)	Controls active container shape.
--md-tabs-active-focus-label-colorFocus Fallbackvar(--md-sys-color-primary)	Controls active focus label color.
--md-tabs-active-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-primary)	Controls active focus state layer color.
--md-tabs-active-focus-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls active focus state layer opacity.
--md-tabs-active-hover-label-colorState Fallbackvar(--md-sys-color-primary)	Controls active hover label color.
--md-tabs-active-hover-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls active hover state layer color.
--md-tabs-active-hover-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls active hover state layer opacity.
--md-tabs-active-indicator-colorColor Fallbackvar(--md-sys-color-primary)	Controls active indicator color.
--md-tabs-active-indicator-heightLayout Fallback0.1875rem	Controls active indicator height.
--md-tabs-active-indicator-minimum-sizeLayout Fallback1.5rem	Controls active indicator minimum size.
--md-tabs-active-indicator-shapeShape Fallback0.1875rem 0.1875rem 0 0	Controls active indicator shape.
--md-tabs-active-label-colorColor Fallbackvar(--md-sys-color-primary)	Controls active label color.
--md-tabs-active-pressed-label-colorState Fallbackvar(--md-sys-color-primary)	Controls active pressed label color.
--md-tabs-active-pressed-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls active pressed state layer color.
--md-tabs-active-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls active pressed state layer opacity.
--md-tabs-active-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls active state layer color.
--md-tabs-compact-container-heightLayout Fallback2.5rem	Controls compact container height.
--md-tabs-compact-tab-padding-inlineLayout Fallback0.625rem	Controls compact tab padding inline.
--md-tabs-compact-with-icon-and-label-container-heightLayout Fallback3.5rem	Controls compact with icon and label container height.
--md-tabs-container-colorColor Fallbackvar(--md-sys-color-surface)	Controls container color.
--md-tabs-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls container elevation.
--md-tabs-container-gapLayout Fallback0rem	Controls container gap.
--md-tabs-container-heightLayout Fallback3rem	Controls container height.
--md-tabs-container-paddingLayout Fallback0rem	Controls container padding.
--md-tabs-container-shapeShape Fallbackvar(--md-shape-docked)	Controls container shape.
--md-tabs-divider-colorColor Fallbackvar(--md-sys-color-surface-variant)	Controls divider color.
--md-tabs-divider-thicknessLayout Fallback0.0625rem	Controls divider thickness.
--md-tabs-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls focus indicator color.
--md-tabs-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-inner-offset)	Controls focus indicator outline offset.
--md-tabs-focus-indicator-shapeFocus Fallbackvar(--md-shape-card)	Controls focus indicator shape.
--md-tabs-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-tabs-icon-label-spaceLayout Fallback0.5rem	Controls icon label space.
--md-tabs-icon-sizeLayout FallbackTypography, density and icon scale (default reference: 1.5rem)	Controls icon size.
--md-tabs-inactive-focus-label-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls inactive focus label color.
--md-tabs-inactive-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls inactive focus state layer color.
--md-tabs-inactive-focus-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls inactive focus state layer opacity.
--md-tabs-inactive-hover-label-colorState Fallbackvar(--md-sys-color-on-surface)	Controls inactive hover label color.
--md-tabs-inactive-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls inactive hover state layer color.
--md-tabs-inactive-hover-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls inactive hover state layer opacity.
--md-tabs-inactive-label-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls inactive label color.
--md-tabs-inactive-pressed-label-colorState Fallbackvar(--md-sys-color-on-surface)	Controls inactive pressed label color.
--md-tabs-inactive-pressed-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls inactive pressed state layer color.
--md-tabs-inactive-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls inactive pressed state layer opacity.
--md-tabs-inactive-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls inactive state layer color.
--md-tabs-indicator-animation-durationMotion Fallback250ms	Controls indicator animation duration.
--md-tabs-indicator-animation-easingMotion Fallbackcubic-bezier(0.2,0,0,1)	Controls indicator animation easing.
--md-tabs-indicator-fade-durationMotion Fallback150ms	Controls indicator fade duration.
--md-tabs-label-text-fontTypography Fallbackvar(--md-sys-typescale-title-small-font)	Controls label text font.
--md-tabs-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-title-small-line-height)	Controls label text line height.
--md-tabs-label-text-sizeLayout Fallbackvar(--md-sys-typescale-title-small-size)	Controls label text size.
--md-tabs-label-text-trackingTypography Fallbackvar(--md-sys-typescale-title-small-tracking)	Controls label text tracking.
--md-tabs-label-text-weightTypography Fallbackvar(--md-sys-typescale-title-small-weight)	Controls label text weight.
--md-tabs-scrollable-tab-min-widthLayout Fallback4.5rem	Controls scrollable tab min width.
--md-tabs-tab-max-widthLayout Fallback16.5rem	Controls tab max width.
--md-tabs-tab-padding-inlineLayout Fallback0.75rem	Controls tab padding inline.
--md-tabs-tonal-active-container-colorColor Fallbackvar(--md-sys-color-surface-container-lowest)	Controls tonal active container color.
--md-tabs-tonal-active-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls tonal active container elevation.
--md-tabs-tonal-active-container-outline-colorColor Fallbackrgb(from var(--md-sys-color-outline-variant)r g b / 0.6)	Controls tonal active container outline color.
--md-tabs-tonal-active-container-outline-widthLayout Fallback0.0625rem	Controls tonal active container outline width.
--md-tabs-tonal-active-container-shapeShape Fallbackvar(--md-shape-chip)	Controls tonal active container shape.
--md-tabs-tonal-active-label-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls tonal active label color.
--md-tabs-tonal-active-state-layer-colorState Fallbackvar(--md-sys-color-outline)	Controls tonal active state layer color.
--md-tabs-tonal-compact-container-heightLayout Fallback2.25rem	Controls tonal compact container height.
--md-tabs-tonal-compact-container-paddingLayout Fallback0.1875rem	Controls tonal compact container padding.
--md-tabs-tonal-compact-tab-padding-inlineLayout Fallback0.75rem	Controls tonal compact tab padding inline.
--md-tabs-tonal-container-colorColor Fallbackvar(--md-sys-color-surface-container)	Controls tonal container color.
--md-tabs-tonal-container-gapLayout Fallback0.125rem	Controls tonal container gap.
--md-tabs-tonal-container-heightLayout Fallback2.75rem	Controls tonal container height.
--md-tabs-tonal-container-paddingLayout Fallback0.25rem	Controls tonal container padding.
--md-tabs-tonal-container-shapeShape Fallbackvar(--md-shape-card)	Controls tonal container shape.
--md-tabs-tonal-hover-label-colorState Fallbackvar(--md-sys-color-on-surface)	Controls tonal hover label color.
--md-tabs-tonal-inactive-label-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls tonal inactive label color.
--md-tabs-tonal-state-layer-colorState Fallbackvar(--md-color-on-container)	Controls tonal state layer color.
--md-tabs-tonal-tab-padding-inlineLayout Fallback1rem	Controls tonal tab padding inline.
--md-tabs-with-icon-and-label-container-heightLayout Fallback4.5rem	Controls with icon and label container height.

Tab

Props

Name	Description	Default
valueRequired	The value that identifies this tab. string	-
hrefOptional	Optional href. When provided, the tab trigger renders as an anchor. string | undefined	undefined
disabledOptional	Whether this tab is disabled. boolean | undefined	false

Slots2

Name	Parameters	Description
default	-	Tab label content.
icon	-	Optional icon slot.

TabList

Props

Name	Description	Default
ariaLabelOptional	Accessible label for the tab list. string | undefined	undefined

Slots1

Name	Parameters	Description
default	-	-

TabPanel

Props

Name	Description	Default
valueRequired	The value that identifies which tab this panel belongs to. string	-

Slots1

Name	Parameters	Description
default	-	-

Composable

useTabs

Full type signature

function useTabs<T extends string = string>(options?: UseTabsOptions<T>): UseTabsReturn<T>

Source: src/composables/useTabs.ts

Field	Type	Required	Description	Default
value	MaybeRefOrGetter<T | undefined>	No	The current active tab value. Can be a ref, getter, or static value.	-
onValueChange	((value: T) => void) | undefined	No	Called when the active tab changes.	-
orientation	MaybeRefOrGetter<"horizontal" | "vertical"> | undefined	No	The orientation of the tab list.	'horizontal'
loop	MaybeRefOrGetter<boolean> | undefined	No	Whether arrow-key navigation loops around.	true
selectWhenFocused	MaybeRefOrGetter<boolean> | undefined	No	Whether focusing a trigger selects it.	true
id	MaybeRefOrGetter<string> | undefined	No	Stable base id used to build aria ids for triggers/panels.	-

Field	Type	Required	Description	Default
value	ComputedRef<T | undefined>	Yes	The currently selected tab value.	-
setValue	(value: T) => void	Yes	Set the active tab value.	-
orientation	ComputedRef<"horizontal" | "vertical">	Yes	Resolved orientation.	-
triggerListAttrs	ComputedRef<Record<string, unknown>>	Yes	Attributes to spread on the tab-list container.	-
getTriggerAttrs	(value: T) => Record<string, unknown>	Yes	Get attributes for a single tab trigger.	-
getPanelAttrs	(value: T) => Record<string, unknown>	Yes	Get attributes for a single tab panel.	-
id	string	Yes	Unique instance id (for aria id generation).	-