auditionadmin/resources/views/components/form/toggle-checkbox.blade.php

12 lines
739 B
PHP

@props(['name', 'checked' => false])
<div x-data="{ toggle: {{ $checked ? 'true':'false'}} }" class="flex items-center">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" x-model="toggle" name="{{ $name }}" class="sr-only" {{ $checked ? 'checked':''}} value="1">
<div :class="toggle ? 'bg-blue-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>