Tabs

Tabs organize content into distinct panels, displayed one at a time.

Demo

Accordion Dialog Flyout

An accordion is a vertical list of headers that reveal or hide content sections when clicked.

A dialog creates a window overlaid on top of a page window, rendering the content underneath inert.

A flyout displays content in an overlay, triggered by a button.

tabs.html

<div x-init x-tabs>
  <div x-tabs:list>
    <button x-tabs:tab="accordion">Accordion</button>
    <button x-tabs:tab="dialog">Dialog</button>
    <button x-tabs:tab="flyout">Flyout</button>
  </div>

  <div x-tabs:panel="accordion">
    An accordion is a vertical list of headers that reveal or hide content
    sections when clicked.
  </div>

  <div x-tabs:panel="dialog" x-cloak>
    A dialog creates a window overlaid on top of a page window, rendering the
    content underneath inert.
  </div>

  <div x-tabs:panel="flyout" x-cloak>
    A flyout displays content in an overlay, triggered by a button.
  </div>
</div>

Features

• Full keyboard navigation
• Supports horizontal orientation
• Supports manual/automatic activation
• Can set default displayed tab

View Source (opens in new tab)

Anatomy

<div x-init x-tabs>
  <div x-tabs:list>
    <button x-tabs:tab></button>
  </div>

  <div x-tabs:panel></div>
</div>

Note

Notice the x-init in the markup. This is required for Alpine to detect and run directives.

Directives

x-tabs

Required

---

The root element for tabs.

Value
The default tab to be displayed. Otherwise, display the first tab.

Event	Description	detail
tabs:change	The tab that is opened	{ tab: string }

x-tabs:list

Required

---

List of tabs.

Modifier	Description
.loop	Loops keyboard navigation (e.g. arrow keys)
.automatic	Automatically show/hide panel with keyboard navigation (e.g. arrow keys)
.vertical | .horizontal	Orientation of the accordion for keyboard navigation. Defaults to .horizontal.

Event	Description	detail
tabs:change	The tab that is opened	{ tab: string }

x-tabs:tab

Required

---

Trigger button that shows the corresponding panel.

Value
The value for this tab

Event	Description	detail
tabs:change	Whether the tab is open or closed	{ open: boolean }

Data Attribute	Values
[data-state]	active | inactive

x-tabs:panel

Required

---

Panel that contains content.

Value
The value for this panel, which should match the correct tab.

Event	Description	detail
tabs:change	Whether the panel is open or closed	{ open: boolean }

Data Attribute	Values
[data-state]	active | inactive