36 lines
1.3 KiB
PHP
36 lines
1.3 KiB
PHP
@props(['label' => null, 'id' => null])
|
|
@php
|
|
$inputId = $id ?? 'checkbox-'.uniqid();
|
|
@endphp
|
|
|
|
<label class="inline-flex cursor-pointer items-center gap-3" @if($inputId) for="{{ $inputId }}" @endif>
|
|
<span class="relative inline-flex h-4 w-4 shrink-0">
|
|
<input
|
|
id="{{ $inputId }}"
|
|
type="checkbox"
|
|
{{ $attributes->class([
|
|
'peer appearance-none h-4 w-4 rounded border border-line bg-inset',
|
|
'checked:bg-accent checked:border-accent',
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40',
|
|
'transition-colors cursor-pointer',
|
|
]) }}
|
|
/>
|
|
{{-- check-mark SVG, shown only when peer checkbox is checked --}}
|
|
<svg
|
|
class="pointer-events-none absolute inset-0 hidden h-4 w-4 peer-checked:block text-void"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<polyline points="3,8 6.5,11.5 13,5" />
|
|
</svg>
|
|
</span>
|
|
@if ($label)
|
|
<span class="select-none text-sm text-ink">{{ $label }}</span>
|
|
@endif
|
|
</label>
|