Laravel Form Components
Docs

Demo: Checkbox

The checkbox component offers an easy way to set up a checkbox input field in your forms.

Basic Usage

Source 
<x-checkbox name="basic-usage-demo" />

With Label

Source
Or via default slot 
<x-checkbox name="with-label-demo"
            label="Remember me" 
/>

<div class="mt-2">
    <div class="relative my-4">
        <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-gray-50 text-gray-500">
                Or via default slot
            </span>
        </div>
    </div>
    <x-checkbox name="with-label-demo-slotted">
        Label rendered via default slot
    </x-checkbox>
</div>

Pre-checked

Source 
<x-checkbox name="pre-checked"
            id="pre-checked-1"
>
    Not checked
</x-checkbox>
<x-checkbox name="pre-checked"
            id="pre-checked-2"
            checked
>
    Pre-checked
</x-checkbox>
<x-checkbox name="pre-checked"
            id="pre-checked-3"
>
    Also not checked
</x-checkbox>

Grouped - Stacked

Source 
<x-checkbox-group>
    <x-checkbox name="stacked-demo"
                id="stacked-1"
    >
        Stacked Option 1
    </x-checkbox>
    <x-checkbox name="stacked-demo"
                id="stacked-2"
    >
        Stacked Option 2
    </x-checkbox>
    <x-checkbox name="stacked-demo"
                id="stacked-3"
    >
        Stacked Option 3
    </x-checkbox>
</x-checkbox-group>

Grouped - Inline

Source 
<x-checkbox-group :stacked="false">
    <x-checkbox name="inline-demo"
                 id="inline-1"
    >
        Inline Option 1
    </x-checkbox>
    <x-checkbox name="inline-demo"
                 id="inline-2"
    >
        Inline Option 2
    </x-checkbox>
    <x-checkbox name="inline-demo"
                 id="inline-3"
    >
        Inline Option 3
    </x-checkbox>
    <x-checkbox name="inline-demo"
                 id="inline-4"
    >
        Inline Option 4
    </x-checkbox>
    <x-checkbox name="inline-demo"
                 id="inline-5"
    >
        Inline Option 5
    </x-checkbox>
</x-checkbox-group>

Grouped - Inline (Custom Columns)

Source 
<x-checkbox-group :stacked="false" grid-cols="2">
    <x-checkbox name="inline-custom-demo"
                id="inline-custom-1"
    >
        Inline Option 1
    </x-checkbox>
    <x-checkbox name="inline-custom-demo"
                id="inline-custom-2"
    >
        Inline Option 2
    </x-checkbox>
    <x-checkbox name="inline-custom-demo"
                id="inline-custom-3"
    >
        Inline Option 3
    </x-checkbox>
    <x-checkbox name="inline-custom-demo"
                id="inline-custom-4"
    >
        Inline Option 4
    </x-checkbox>
</x-checkbox-group>