@props([
    'label' => '',
    'name' => '',
    'value' => '',
    'checked' => false,
])
<label class="form-check-label d-inline-block me-2 mb-2">
    <input
        type="checkbox"
        name="{{ $name }}"
        value="{{ $value }}"
        class="d-none"
        {{ $checked ? 'checked' : '' }}
onchange="this.nextElementSibling.classList.toggle('bg-primary', this.checked); this.nextElementSibling.classList.toggle('text-white', this.checked);"
    >
    <span class="badge rounded-pill text-dark border border-secondary px-3 py-2"
          style="cursor: pointer; user-select: none;">
        {{ $label }}
    </span>
</label>