Skip to main content

Forms

Checkbox code

Copy the implementation or inspect every file that belongs to this component unit.

resources/views/components/ui/checkbox.blade.php

@props([
    'label' => null,
    'description' => null,
    'disabled' => false,
])

@php
    /*
    | Checkbox with optional inline label + description.
    |
    | Usage:
    |   <x-ui.checkbox name="terms" label="I agree to the terms" />
    */
    $id = $attributes->get('id') ?? 'cb_'.\Illuminate\Support\Str::random(6);
@endphp

<label for="{{ $id }}" {{ $attributes->only('class')->merge(['class' => 'flex items-start gap-3 '.($disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer')]) }}>
    <input
        id="{{ $id }}"
        type="checkbox"
        @disabled($disabled)
        {{ $attributes->except('class')->merge(['class' => 'mt-0.5 h-4 w-4 rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-brand-600 shadow-sm focus:ring-brand-500 focus:ring-offset-0 transition']) }}
    >
    @if ($label || $description || ! $slot->isEmpty())
        <span class="text-sm">
            @if ($label)
                <span class="font-medium text-gray-800 dark:text-gray-200">{{ $label }}</span>
            @endif
            {{ $slot }}
            @if ($description)
                <span class="block text-gray-500 dark:text-gray-400">{{ $description }}</span>
            @endif
        </span>
    @endif
</label>