Swap

This component allows you to swap between two states (true / false) using two elements with animations.

If you have multiple x-swap on the same page make sure to set different ids.

Default

<x-swap wire:model="swap1" />

public bool $swap1 = false;

Text content

When providing the true or false attributes, the icons will be ignored.

OFF

<x-swap wire:model="swap2" true="ON" false="OFF" />

public bool $swap2 = true;

Custom icons + size

<x-swap true-icon="o-speaker-wave" false-icon="o-speaker-x-mark" icon-size="h-8 w-8" />

Animations

It supports daisy-ui's swap animations.

If you have multiple x-swap on the same page make sure to set different ids.

<x-swap id="fade" />
<x-swap id="flip" class="swap-flip" />
<x-swap id="rotate" class="swap-rotate" />

Custom content

It is possible to provide completely custom content. Please, note that the width will always be the width of the larger content.

Custom true

Custom false

<x-swap wire:model="swap3" id="custom">
    <x-slot:true class="bg-warning rounded p-2">
        Custom true
    </x-slot:true>
    <x-slot:false class="bg-secondary text-white p-2">
        Custom false
    </x-slot:false>
</x-swap>

Before and after

You can add content before and after the content as well.

BEFORE

AFTER

<x-swap id="slots" wire:model.live="swap4" class="flex gap-3">
    <x-slot:before class="text-primary">
        BEFORE
    </x-slot:before>
    <x-slot:after class="text-error">
        AFTER
    </x-slot:after>
</x-swap>

maryUI

Sponsor