Demo: Checkbox
The checkbox component offers an easy way to set up a checkbox input field in your forms.
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>
<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>
<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>
<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>
<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>