Toggle code

@props([
    'label' => null,
    'description' => null,
    'name' => null,
    'value' => '1',
    'checked' => false,
    'disabled' => false,
])

@php
    /*
    | Switch / toggle built on a hidden checkbox driven by Alpine.
    |
    | Usage:
    |   <x-ui.toggle name="notifications" label="Email notifications" :checked="true" />
    */
@endphp

<label
    x-data="{ on: @js((bool) $checked) }"
    {{ $attributes->merge(['class' => 'flex items-center justify-between gap-4 '.($disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer')]) }}
>
    @if ($label || $description)
        <span class="text-sm">
            @if ($label)
                <span class="font-medium text-gray-800 dark:text-gray-200">{{ $label }}</span>
            @endif
            @if ($description)
                <span class="block text-gray-500 dark:text-gray-400">{{ $description }}</span>
            @endif
        </span>
    @endif

    <button
        type="button"
        role="switch"
        @disabled($disabled)
        @click="on = ! on"
        :aria-checked="on.toString()"
        :class="on ? 'bg-brand-600' : 'bg-gray-300 dark:bg-gray-700'"
        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
    >
        <span
            :class="on ? 'translate-x-5' : 'translate-x-0.5'"
            class="inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform duration-200"
        ></span>
    </button>

    @if ($name)
        <input type="hidden" :value="on ? '{{ $value }}' : ''" name="{{ $name }}">
    @endif
</label>