Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Tabs

Tab navigation with animated panel transitions. Each tab is a named slot; the slot name becomes the key used for navigation and external control.

Basic usage

Set the button label with the label attribute on the slot. If omitted, the slot name is used as the label. The first tab is active by default; use :default to specify another.

Each tab is a named slot. The slot name serves as its key, used for navigation, external control, and invalid feedback detection.

<x-wirestrap::tabs id="tabs" default="settings">
    <x-slot:overview label="Overview"> ... </x-slot:overview>
    <x-slot:settings label="Settings"> ... </x-slot:settings>
</x-wirestrap::tabs>

Icons

Add an icon to a tab button with icon. By default it appears before the label; set icon-placement="end" to place it after.

Icon prop

The icon prop accepts any class string from your preferred icon library, or an array of attributes for full control. Custom icon components are also supported, see icon configuration.

Profile tab with an icon at the start.

<x-wirestrap::tabs id="tabs">
    <x-slot:profile label="Profile" icon="bi-person">
        ...
    </x-slot:profile>
    <x-slot:settings label="Settings" icon="bi-gear" icon-placement="end">
        ...
    </x-slot:settings>
</x-wirestrap::tabs>

Rich labels

When plain text isn't enough for the button, add a label_{key} slot alongside the tab slot. It replaces the label attribute for that tab.

Inbox content.

<x-wirestrap::tabs id="tabs">
    <x-slot:label_inbox>
        <span>Inbox</span>
        <span class="badge">12</span>
    </x-slot:label_inbox>
    <x-slot:inbox> ... </x-slot:inbox>

    <x-slot:sent label="Sent"> ... </x-slot:sent>
</x-wirestrap::tabs>

Actions slot

The actions slot renders after the last tab button in the nav bar. Use it for contextual controls or a status badge.

Overview content.

<x-wirestrap::tabs id="tabs">
    <x-slot:overview label="Overview"> ... </x-slot:overview>
    <x-slot:history label="History"> ... </x-slot:history>

    <x-slot:actions>
        <button>Export</button>
    </x-slot:actions>
</x-wirestrap::tabs>

External control

Enable events to control the active tab from any Alpine context via $wirestrap.tabs.show(id, key).

Profile content.

<x-wirestrap::tabs id="tabs" events>
    <x-slot:profile label="Profile"> ... </x-slot:profile>
    <x-slot:settings label="Settings"> ... </x-slot:settings>
</x-wirestrap::tabs>

<button x-on:click="$wirestrap.tabs.show('tabs', 'settings')">Go to Settings</button>

Invalid feedback

Pass invalid-feedback to scan panels after each Livewire morph. Any tab containing an input with the validation error class gets its button highlighted. Useful for multi-section forms where the user needs to see which tab has errors without opening each one.

First name

Last name

<x-wirestrap::tabs id="form-tabs" invalid-feedback>
    <x-slot:identity label="Identity">
        <x-wirestrap::input label="First name" wire:model="firstName" />
    </x-slot:identity>

    <x-slot:security label="Security">
        <x-wirestrap::input label="Password" password wire:model="password" />
    </x-slot:security>
</x-wirestrap::tabs>

The class it looks for defaults to ws-form-invalid, configurable via wirestrap.validation.invalid.

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::tabs

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Element id. Required when strict mode is enabled.
`default`	`string\|null`	`null`	Key of the tab active on render. Defaults to the first tab.
`events`	`bool`	`config`	Enable external control via the $wirestrap.tabs magic helper.
`invalid-feedback`	`bool`	`config`	Highlights tab buttons containing validation errors after each Livewire morph.
No results found

Slot attributes

To use rich content as the button, add a label_{key} slot alongside the tab slot. It takes precedence over the label attribute.

Prop	Type	Default	Description
`label`	`string`	`slot key`	Tab button label. Falls back to the slot name if omitted.
`icon`	`string\|array`	`null`	Icon passed to x-wirestrap::ui.icon.
`icon-placement`	`string`	`'start'`	Icon position relative to label: start or end.
No results found

$wirestrap.tabs

Method	Type	Default	Description
`$wirestrap.tabs.show(id, key)`	`--`	`--`	Switch to the tab identified by key.
No results found

⭐ GitHub