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.
Change your password here. Click save when you're done.
Change your settings 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 |
defaultValue | - | string The initial value of the tabs. |
value | - | Writable<string> A writable store that can be used to update the tabs value. |
onValueChange | - | ChangeFn<string> A callback that is called when the value of the tabs changes. See Change Functions |
Elements
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] |
|
[data-melt-tabs] | Present on all tabs elements. |
list
The tabs list component.
Data Attributes
Data Attribute | Value |
[data-orientation] |
|
[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] |
|
[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 |
ArrowRight | Moves focus to the next trigger depending on |
ArrowUp | Moves focus to the preview trigger depending on |
ArrowLeft | Moves focus to the preview trigger depending on |
Home | Moves focus to the first trigger depending on |
End | Moves focus to the last trigger depending on |
On This Page