Checkbox

Select one or multiple options from a set, with selection triggered by clicking the label or the checkbox. You can also toggle the selection using the spacebar or enter key.

I agree to the terms and conditions

<x-checkbox wire:model="terms" label="I agree to the terms and conditions" />

Checkbox group

Organize a list of related checkboxes vertically.

Notifications

Push notifications

In-app alerts

SMS

public array $notifications = ['push', 'email', 'app', 'sms'];

<x-checkbox.group label="Notifications">
    <x-checkbox label="Push notifications" value="push" wire:model="notifications" />
    <x-checkbox label="Email" value="email" wire:model="notifications" />
    <x-checkbox label="In-app alerts" value="app" wire:model="notifications" />
    <x-checkbox label="SMS" value="sms" wire:model="notifications" />
</x-checkbox.group>

With description

Align descriptions for each checkbox directly below its label.

Subscription preferences

Newsletter

Receive our monthly newsletter with the latest updates and offers.

Product updates

Stay informed about new features and product updates.

Event invitations

Get invitations to our exclusive events and webinars.

<x-checkbox.group label="Subscription preferences">
    <x-checkbox checked value="newsletter" label="Newsletter"
        description="Receive our monthly newsletter with the latest updates and offers." />
    <x-checkbox value="updates" label="Product updates"
        description="Stay informed about new features and product updates." />
    <x-checkbox value="invitations" label="Event invitations"
        description="Get invitations to our exclusive events and webinars." />
</x-checkbox.group>

With badge

Add a badge to a checkbox to highlight its status or importance.

Terms and conditions

Required

Read and agree to the terms and conditions.

Terms and conditions

Not Optional

Read and agree to the terms and conditions.

<x-checkbox id="Terms 1" label="Terms and conditions" required
    description="Read and agree to the terms and conditions." />
<x-checkbox id="Terms 2" label="Terms and conditions" badge="Not Optional" badge-color="red"
    description="Read and agree to the terms and conditions." />

If multiple checkboxs share the same


    label

and


    wire:model

, ensure they have unique IDs by providing the

id

prop explicitly.

Checked

Mark a checkbox as checked by default.

Enable notifications

<x-checkbox checked />

Disabled

Prevent users from interacting with and modifying a checkbox.

Read and write

<x-checkbox disabled />

Horizontal fieldset

Organize a group of related checkboxes horizontally.

Languages

Choose the languages you want to support.

English

Spanish

French

German

<x-fieldset>
    <x-legend>Languages</x-legend>
 
    <x-description>Choose the languages you want to support.</x-description>
 
    <div class="flex gap-4 *:gap-x-2">
        <x-checkbox checked value="english" label="English" />
        <x-checkbox checked value="spanish" label="Spanish" />
        <x-checkbox value="french" label="French" />
        <x-checkbox value="german" label="German" />
    </div>
</x-fieldset>