Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

View code

Make changes to your account here. Click save when you're done.

Name

Features

Full keyboard navigation
Can be controlled or uncontrolled
Supports horizontal and vertical orientation

Anatomy

Root: The root container for the tab component
List: The container for the tab triggers
Trigger: The button(s) that open/close the tab panels
Content: The container for the tab panels

API Reference

createTabs

Props

Prop	Default	Type / Description
`value`	-	`string` The initial value of the tabs.
`onChange`	-	`(value: string) => void` A callback function that is called when the tabs value changes.
`activateOnFocus`	`true`	`boolean` Whether or not to activate the tab when it is focused.
`loop`	`true`	`boolean` Whether or not to loop the tabs when navigating with the keyboard.
`orientation`	`'horizontal'`	`'horizontal' \| 'vertical'` The orientation of the tabs.
`autoSet`	`true`	`boolean` Whether or not to automatically set the tabs value when a trigger is clicked.

Returned Props

Returned Prop	Type	Description
`options`	`Writable<CreateTabsProps>`	A writable store that can be used to update the tabs props.
`value`	`Writable<string>`	A writable store that can be used to update the current tab value.
`root`	-	The builder store used to create the root tabs element.
`list`	-	The builder store used to create the tabs list element.
`trigger`	-	The builder store used to create a tabs trigger element.
`content`	-	The builder store used to create a tabs content element.

root

Data Attributes

Data Attribute	Value
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-melt-tabs]`	Present on all tabs elements.

list

Data Attributes

Data Attribute	Value
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-melt-tabs-list]`	Present on all tab list elements.

trigger

Props

Prop	Default	Type / Description
`value` *	-	`string` The value of the tab that this trigger opens.
`disabled`	`false`	`boolean` Whether or not the trigger is disabled.

Data Attributes

Data Attribute	Value
`[data-state]`	'active' \| 'inactive'
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-disabled]`	Present when the element is disabled.
`[data-value]`	The value of the tab that this trigger opens.
`[data-melt-tabs-trigger]`	Present on all tab trigger elements.

content

Data Attributes

Data Attribute	Value
`[data-melt-tabs-content]`	Present on all tab content elements.

Accessibility

Adheres to the Tabs WAI-ARIA design pattern

Key	Behavior
`Tab`	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
`ArrowDown`	Moves focus to the next trigger depending on `orientation` & activates the corresponding content.
`ArrowRight`	Moves focus to the next trigger depending on `orientation` & activates the corresponding content.
`ArrowUp`	Moves focus to the preview trigger depending on `orientation` & activates the corresponding content.
`ArrowLeft`	Moves focus to the preview trigger depending on `orientation` & activates the corresponding content.
`Home`	Moves focus to the first trigger depending on `orientation` & activates the corresponding content.
`End`	Moves focus to the last trigger depending on `orientation` & activates the corresponding content.

On This Page