40 lines
1.8 KiB
PHP
40 lines
1.8 KiB
PHP
@props([
|
|
'name' => '',
|
|
'value' => '',
|
|
'label' => '',
|
|
'id' => null,
|
|
'checked' => false,
|
|
'disabled' => false,
|
|
])
|
|
|
|
@php
|
|
$inputId = $id ?? ($name . '_' . $value);
|
|
@endphp
|
|
|
|
<label for="{{ $inputId }}" class="inline-flex items-center gap-2.5 cursor-pointer select-none group {{ $disabled ? 'opacity-50 cursor-not-allowed' : '' }}">
|
|
<div class="relative flex items-center justify-center">
|
|
<input
|
|
type="checkbox"
|
|
id="{{ $inputId }}"
|
|
name="{{ $name }}"
|
|
value="{{ $value }}"
|
|
{{ $checked ? 'checked' : '' }}
|
|
{{ $disabled ? 'disabled' : '' }}
|
|
{{ $attributes->merge(['class' => 'peer sr-only']) }}
|
|
>
|
|
<div class="w-[18px] h-[18px] rounded-[5px] border-2 border-slate-300 bg-white transition-all duration-200 ease-out
|
|
peer-checked:border-[#130F26] peer-checked:bg-[#130F26]
|
|
peer-focus-visible:ring-2 peer-focus-visible:ring-[#130F26]/30 peer-focus-visible:ring-offset-1
|
|
peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
|
|
group-hover:border-slate-400 peer-checked:group-hover:border-[#130F26]
|
|
peer-checked:shadow-sm"></div>
|
|
<svg class="absolute w-[11px] h-[11px] text-white pointer-events-none opacity-0 scale-50 transition-all duration-200 ease-out peer-checked:opacity-100 peer-checked:scale-100"
|
|
viewBox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M1.5 5.5L4.5 8.5L10.5 1.5"/>
|
|
</svg>
|
|
</div>
|
|
@if($label)
|
|
<span class="text-sm text-slate-700 group-hover:text-slate-900 transition-colors">{{ $label }}</span>
|
|
@endif
|
|
</label>
|