Components

Checkbox

{note} You're browsing the documentation for an old version of laravel-form-components. Consider upgrading your project to v7. Check your version with the following command:

composer show rawilk/laravel-form-components

The checkbox component offers an easy way to set up a checkbox input field in your forms. By simple setting its name attribute it also automatically sets your id attribute and makes sure old values are respected.

The most basic usage of the component exists in setting a name attribute:

<x-checkbox name="remember_me" />

This will output:

<div class="choice-container">
    <div class="choice-input">
        <input class="form-checkbox"
               name="remember_me"
               id="remember_me"
               type="checkbox" 
        />
    </div>

    <div class="choice-label">
        <label for="remember_me"></label>
    </div>
</div>

You can easily add a label to a checkbox by using the label attribute, or by using the default slot:

Via prop:

<x-checkbox name="remember_me" label="Remember" />

Via slot:

<x-checkbox name="remember_me">
    Remember me
</x-checkbox>

Both will output:

<div class="choice-container">
    <div class="choice-input">
        <input class="form-checkbox"
               name="remember_me"
               id="remember_me"
               type="checkbox" 
        />
    </div>

    <div class="choice-label">
        <label for="remember_me">Remember</label>
    </div>
</div>

You can also add a description (help text) for a checkbox by either setting the description attribute or by using the description slot.

Via prop:

<x-checkbox name="remember_me" label="Remember" description="Keep me logged in" />
<x-checkbox name="remember_me" label="Remember">
    <x-slot name="description">Keep me logged in</x-slot>
</x-checkbox>

Both will output:

<div class="choice-container">
    <div class="choice-input">
        <input class="form-checkbox"
               name="remember_me"
               id="remember_me"
               type="checkbox" 
        />
    </div>

    <div class="choice-label">
        <label for="remember_me">Remember</label>
        
        <p class="choice-description">Keep me logged in</p>
    </div>
</div>

The checkbox component also supports checked values that were set. For example, you might want to apply some validation in the backend and make sure the user doesn't lose their input data when you show them the form again with the validation errors. When re-rendering the form, the checkbox component will remember the checked value (when not using wire:model):

<input name="remember_me" id="remember_me" type="checkbox" checked />
Previous
Custom Select
Caught a mistake? Suggest an edit on GitHub