12 lines
784 B
PHP
12 lines
784 B
PHP
@props(['name', 'checked' => false])
|
|
<div x-data="{ toggle: {{ $checked ? 'true':'false'}} }" class="flex items-center">
|
|
<label {{ $attributes->merge(['class'=>'relative inline-flex items-center cursor-pointer']) }}>{{ $slot }}
|
|
<input type="checkbox" x-model="toggle" name="{{ $name }}" class="sr-only" {{ $checked ? 'checked':''}} value="1" >
|
|
<div :class="toggle ? 'bg-indigo-600' : 'bg-gray-200'" class="w-11 h-6 rounded-full transition-colors duration-300"></div>
|
|
<div :class="toggle ? 'translate-x-6' : 'translate-x-1'" class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-300"></div>
|
|
</label>
|
|
@error($name)
|
|
<p class="text-xs text-red-500 font-semibold mt-1 ml-3">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|