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 line when you want a closer Material 3 tab bar with a bottom indicator.

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

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
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 Fallback1.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.

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

Composable

useTabs

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).	-

API

Tabs

Props

Name	Description	Default
variantOptional	Visual variant of the tabs. navigationline	"navigation"
sizeOptional	Size of the tab triggers. extra-smallsmallmediumlargeextra-large	"medium"
modeOptional	Layout mode for the tab list. autofixedscrollable	"auto"
orientationOptional	The orientation of the tab list. horizontalvertical	"horizontal"
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.

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

Events0

No events documented.

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

Events0

No events documented.

Slots1

Name	Parameters	Description
default	-	-

TabPanel

Props

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

Events0

No events documented.

Slots1

Name	Parameters	Description
default	-	-