Checkbox - Laravel Blade

Use the checkbox component to select one or more options from a list, with support for colors, helper text, disabled state, and various layout options.

Default Checkbox

Blade code

<div class="space-y-4">
    <x-fwb.checkbox label="Default checkbox" />
    <x-fwb.checkbox label="Checked state" :checked="true" />
</div>

Disabled State

Blade code

<div class="space-y-4">
    <x-fwb.checkbox label="Disabled checkbox" :disabled="true" />
    <x-fwb.checkbox label="Disabled checked" :disabled="true" :checked="true" />
</div>

Helper Text

For orders shipped from $25 in books or $29 in other categories.

You will receive promotional emails and special offers.

Blade code

<div class="space-y-4">
    <x-fwb.checkbox label="Free shipping" helper="For orders shipped from $25 in books or $29 in other categories." />
    <x-fwb.checkbox label="I agree to the terms and conditions" helper="You will receive promotional emails and special offers." :required="true" />
</div>

Inline Layout

Blade code

<div class="flex flex-wrap gap-6">
    <x-fwb.checkbox label="Vue JS" :checked="true" />
    <x-fwb.checkbox label="React" />
    <x-fwb.checkbox label="Angular" />
    <x-fwb.checkbox label="Svelte" />
</div>

Colors

Blade code

<div class="flex flex-wrap gap-6">
    <x-fwb.checkbox label="Blue" color="blue" :checked="true" />
    <x-fwb.checkbox label="Red" color="red" :checked="true" />
    <x-fwb.checkbox label="Green" color="green" :checked="true" />
    <x-fwb.checkbox label="Purple" color="purple" :checked="true" />
    <x-fwb.checkbox label="Teal" color="teal" :checked="true" />
    <x-fwb.checkbox label="Yellow" color="yellow" :checked="true" />
    <x-fwb.checkbox label="Orange" color="orange" :checked="true" />
</div>

Bordered

Blade code

<div class="space-y-4 max-w-md">
    <div class="flex items-center ps-4 border border-gray-200 rounded-lg dark:border-gray-700">
        <x-fwb.checkbox id="bordered-checkbox-1" label="Default radio" :checked="true" />
    </div>
    <div class="flex items-center ps-4 border border-gray-200 rounded-lg dark:border-gray-700">
        <x-fwb.checkbox id="bordered-checkbox-2" label="Checked state" />
    </div>
</div>

Checkbox List Group

Technology

Blade code

<div class="max-w-md">
    <h3 class="mb-4 font-semibold text-gray-900 dark:text-white">Technology</h3>
    <ul class="w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
        <li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600">
            <div class="flex items-center ps-3">
                <x-fwb.checkbox id="vue-checkbox" label="Vue JS" />
            </div>
        </li>
        <li class="w-full border-b border-gray-200 dark:border-gray-600">
            <div class="flex items-center ps-3">
                <x-fwb.checkbox id="react-checkbox" label="React" />
            </div>
        </li>
        <li class="w-full border-b border-gray-200 dark:border-gray-600">
            <div class="flex items-center ps-3">
                <x-fwb.checkbox id="angular-checkbox" label="Angular" />
            </div>
        </li>
        <li class="w-full rounded-b-lg dark:border-gray-600">
            <div class="flex items-center ps-3">
                <x-fwb.checkbox id="laravel-checkbox" label="Laravel" />
            </div>
        </li>
    </ul>
</div>

Component Properties

Checkbox x-fwb.checkbox

Prop Type Default Description
id string auto Unique identifier for the checkbox. Auto-generated if not provided.
label string|null null Label text displayed next to the checkbox.
helper string|null null Helper text displayed below the label.
checked bool false Set the checkbox to be checked by default.
disabled bool false Disable the checkbox.
required bool false Mark the checkbox as required.
color string blue Checkbox color: blue, red, green, purple, teal, yellow, orange.