Toggles

<div class="space-y-10 w-full mx-auto max-w-lg">
    <x-lb.input.toggle>
        <x-lb.input.toggle.label label="Simple Toggle" description="Toggle description text." />
        <x-lb.input.toggle.simple />
    </x-lb.input.toggle>
 
    <x-lb.input.toggle>
        <x-lb.input.toggle.label label="Short Toggle" description="Toggle description text." />
        <x-lb.input.toggle.short />
    </x-lb.input.toggle>
 
 
    <x-lb.input.toggle>
        <x-lb.input.toggle.label label="Checkmark Toggle" description="Toggle description text." />
        <x-lb.input.toggle.checkmark />
    </x-lb.input.toggle>
</div>

@props(['model' => null, 'defer' => false, 'baseClass' => 'flex w-full justify-between', 'class' => 'col-span-6'])
 
@if ($model)
    <div x-data="{ switchOn: @entangle($model . ($defer ? '.defer' : '')) }" {{ $attributes->merge(['class' => $baseClass . ' ' . $class]) }}>
        <input :id="$id('checkbox-switch')" type="checkbox" name="switch" class="hidden" x-model="switchOn">
        {{ $slot }}
    </div>
@else
    <div x-data="{ switchOn: false }" {{ $attributes->merge(['class' => $baseClass . ' ' . $class]) }}>
        <input :id="$id('checkbox-switch')" type="checkbox" name="switch" class="hidden" x-model="switchOn">
        {{ $slot }}
    </div>
@endif

@props([
    'baseClass' => 'text-sm text-neutral-500 leading-5 font-semibold',
    'class' => '',
    'label' => 'label',
    'for' => null,
    'description' => null,
])
 
<div @click="switchOn = ! switchOn; $refs.switchButton.click(); $refs.switchButton.focus();" class="w-full">
    <label :id="$id('switch')" for="{{ $for ?? $label }}"
        {{ $attributes->merge(['class' => $baseClass . ' ' . $class]) }} aria-label="{{ $label }}">
        {{ $label }}
    </label>
 
    @isset($description)
        <x-lb.form.text class="mt-0 w-4/5">
            {{ $description }}
        </x-lb.form.text>
    @endisset
</div>

@props([
    'activeClass' => ' bg-indigo-500 ',
    'inactiveClass' => ' bg-neutral-200 ',
    'initialize' => '',
])
 
@php
    if ($initialize !== '') {
        $initialBackgroundClass = $initialize ? $activeClass : $inactiveClass;
        $initialSpanTranslateClass = $initialize ? 'translate-x-[18px]' : 'translate-x-0.5';
    } else {
        $initialBackgroundClass = '';
        $initialSpanTranslateClass = '';
    }
@endphp
 
<div x-data="{
    activeClass: '{{ $activeClass }}',
    inactiveClass: '{{ $inactiveClass }}',
    initialBackgroundClass: '{{ $initialBackgroundClass }}',
    initialSpanTranslateClass: '{{ $initialSpanTranslateClass }}'
}" x-ref="switchButton" type="button" @click="switchOn = ! switchOn" x-init="function() {
    $refs.switchButton.classList.remove(initialBackgroundClass);
    $refs.switchButton.firstChild.classList.remove(initialSpanTranslateClass);
}"
    :class="{
        [activeClass]: switchOn, [inactiveClass]: !switchOn
    }" role="switch"
    class="relative inline-flex h-6 py-0.5 ml-4 focus:outline-none rounded-full w-10 transition-colors ease-in-out duration-200 flex-none {{ $initialBackgroundClass }}">
    <span :class="{ 'translate-x-[18px]': switchOn, 'translate-x-0.5': !switchOn }"
        class="w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-200 ease-in-out {{ $initialSpanTranslateClass }}"></span>
</div>

@props([
    'activeClass' => ' bg-indigo-500 ',
    'inactiveClass' => ' bg-neutral-200 ',
    'initialize' => '',
])
 
 
@php
    if ($initialize !== '') {
        $initialBackgroundClass = $initialize ? $activeClass : $inactiveClass;
        $initialSpanTranslateClass = $initialize ? 'translate-x-5' : 'translate-x-0';
    } else {
        $initialBackgroundClass = '';
        $initialSpanTranslateClass = '';
    }
@endphp
 
<div x-data="{
    activeClass: '{{ $activeClass }}',
    inactiveClass: '{{ $inactiveClass }}',
    initialBackgroundClass: '{{ $initialBackgroundClass }}',
    initialSpanTranslateClass: '{{ $initialSpanTranslateClass }}'
}" x-ref="switchButton" @click="switchOn = ! switchOn" x-init="function() {
    $refs.switchButton.firstChild.classList.remove(initialBackgroundClass);
    $refs.switchButton.lastChild.classList.remove(initialSpanTranslateClass);
}" role="switch"
    class="relative inline-flex h-5 w-10 flex-shrink-0 items-center flex-none">
    <span aria-hidden="true" :class="{
        [activeClass]: switchOn, [inactiveClass]: !switchOn }"
        class="absolute mx-auto h-4 w-9 rounded-full transition-colors ease-in-out duration-200 {{ $initialBackgroundClass }}"></span>
    <span :class="{ 'translate-x-5': switchOn, 'translate-x-0': !switchOn }" aria-hidden="true"
        class="absolute left-0 inline-block h-5 w-5 transform rounded-full border border-neutral-200 bg-white shadow transition-transform duration-200 ease-in-out {{ $initialSpanTranslateClass }}"></span>
</div>

@props([
    'activeClass' => ' bg-emerald-500 ',
    'inactiveClass' => ' bg-neutral-200 ',
    'initialize' => '',
])
 
@php
    if ($initialize !== '') {
        $initialBackgroundClass = $initialize ? $activeClass : $inactiveClass;
        $initialSpanTranslateClass = $initialize ? 'translate-x-6' : 'translate-x-1';
    } else {
        $initialBackgroundClass = '';
        $initialSpanTranslateClass = '';
    }
@endphp
 
<div x-data="{
    activeClass: '{{ $activeClass }}',
    inactiveClass: '{{ $inactiveClass }}',
    initialBackgroundClass: '{{ $initialBackgroundClass }}',
    initialSpanTranslateClass: '{{ $initialSpanTranslateClass }}'
}" x-ref="switchButton" type="button" role="switch" @click="switchOn = ! switchOn"
    x-init="function() {
        $refs.switchButton.classList.remove(initialBackgroundClass);
        $refs.switchButton.firstChild.classList.remove(initialSpanTranslateClass);
    }" :aria-checked="switchOn.toString()"
    :class="{
        [activeClass]: switchOn, [inactiveClass]: !switchOn
    }"
    class="relative inline-flex ml-3  py-1 h-7 focus:outline-none rounded-full w-12 transition-colors flex-none {{ $initialBackgroundClass }}">
    <span :class="{ 'translate-x-6': switchOn, 'translate-x-1': !switchOn }"
        class="flex items-center justify-center w-5 h-5  bg-white rounded-full shadow-md transition-transform {{ $initialSpanTranslateClass }}">
 
        <div class="h-4 w-4 text-neutral-500 transition-transform duration-200 ease-in-out" x-show="!switchOn"
            style="{{ $initialize ? 'display: none;' : '' }}">
            <svg fill="none" viewBox="0 0 12 12">
                <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </div>
 
        <div class="h-4 w-4 text-neutral-500 transition-transform duration-200 ease-in-out" x-show="switchOn"
            style="{{ $initialize ? '' : 'display: none;' }}">
            <svg fill="currentColor" viewBox="0 0 12 12">
                <path
                    d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
            </svg>
        </div>
    </span>
</div>