Tabs

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

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

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

The builder function used to create the tabs component.

Props

Prop Default Type / Description
loop false
boolean

Whether or not the focus should loop back to the first item when the last item is reached.
activateOnFocus true
boolean

Whether or not to activate the tab when it is focused.
orientation 'horizontal'
'horizontal' | 'vertical'

The orientation of the tabs.
autoSet true
boolean

If true and no defaultValue or value is given, the value state will be set to the first tab item provided on mount.
defaultValue -
string

The initial value of the tabs.
value -
Writable<string>

A writable store that can be used to update the tabs value.

See Bring Your Own Store

onValueChange -
ChangeFn<string>

A callback that is called when the value of the tabs changes.

See Change Functions

Elements

Element Description

The builder store used to create the root tabs element.

The builder store used to create the tabs list element.

The builder store used to create a tabs trigger element.

The builder store used to create a tabs content element.

States

State Description
value

A writable store that represents the current value of the tabs.

Options

Option Description
loop

Whether or not the focus should loop back to the first item when the last item is reached.
activateOnFocus

Whether or not to activate the tab when it is focused.
orientation

The orientation of the tabs.

root

The root tabs component.

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'
[data-melt-tabs]

Present on all tabs elements.

list

The tabs list component.

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'
[data-melt-tabs-list]

Present on all tab list elements.

trigger

The element which opens a given tab.

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.

Custom Events

Event Value
m-focus (e: ) => void
m-click (e: ) => void
m-keydown (e: ) => void

content

The element that is opened when a given trigger is clicked.

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.