Checkbox

Display a checkbox with or without a label. The default checkbox colour is blue but there are nine colours available to choose from.


    <x-bladewind::checkbox  />

I agree to the terms and conditions

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

I agree to the terms and conditions


<x-bladewind::checkbox
    label="I agree to the <a href='/terms'>terms and conditions</a>"  />

I am checked by default

        
            
            <x-bladewind::checkbox
                label="I am checked by default"
                checked="true"  />

I am disabled I am checked and disabled

        
            
            <x-bladewind::checkbox
                label="I am disabled"
                disabled="true"  />

Coloured Checkboxes

Like most of the BladewindUI components, checkboxes also come in nine colours to enable the components sit better in most designs with various colour schemes.

        
            <x-bladewind::checkbox
                color="red"
                checked="true"
                label="I am a red checkbox" />

            <x-bladewind::checkbox
                color="yellow"
                checked="true"
                label="I am a yellow checkbox" />

            <x-bladewind::checkbox
                color="green"
                checked="true"
                label="I am a green checkbox" />

            <x-bladewind::checkbox
                color="pink"
                checked="true"
                label="I am a pink checkbox" />

            <x-bladewind::checkbox
                color="cyan"
                checked="true"
                label="I am a cyan checkbox" />

            <x-bladewind::checkbox
                color="black"
                checked="true"
                label="I am a black checkbox" />

            <x-bladewind::checkbox
                color="purple"
                checked="true"
                label="I am a purple checkbox" />

            <x-bladewind::checkbox
                color="orange"
                checked="true"
                label="I am a orange checkbox" />

            <x-bladewind::checkbox
                color="blue"
                checked="true"
                label="I am a blue checkbox" />

Checkboxes and forms

When using checkboxes with forms, it is always good practice to give the checkbox a name and value. That way, when the form is submitted, the value of the checkbox can be retrieved from its name. It is important to note that, in some cases, if the user does not select the checkbox, the name of the checkbox will be ignored completely from your payload.

Send me weekly newsletters

        
<x-bladewind::checkbox
            name="notify_me"
            value="1"
            label="Send me weekly newsletters" />

Laravel Form State

When validation fails, Laravel redirects back with the submitted values flashed to the session and the messages in $errors. The Checkbox component can read both for you, so you no longer write {{ old('...') }} and an error block on every single field.

        
<x-bladewind::checkbox
    name="terms"
    value="yes"
    label="I agree to the terms"
    fill_from_old="true"
    show_validation_error="true" />

fill_from_old repopulates the field from old(). show_validation_error gives the field its error state and renders $errors->first() underneath it. Add error_bag if you validate into a named bag.

Checkboxes need a little more care than a text field, and the component handles it for you. An unticked box submits nothing at all, so "this field is missing from the old input" only means unchecked once a submission has actually bounced back. On a form's first render there is no old input, and a box you set with checked="true" stays checked. For a group of checkboxes sharing one name, only the boxes whose values were submitted come back ticked.

Both are off by default. If your form already prints its own validation messages, switching this on without removing them would print every message twice.

Turning it on for every form

Rather than setting the attributes field by field, set them once in your config/bladewind.php and every form component follows.

        
// config/bladewind.php
'forms' => [
    'fill_from_old' => true,
    'show_validation_error' => true,
    'error_bag' => null,
],

An attribute on a single field always wins over the config, so you can opt one field out with show_validation_error="false".

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Checkbox component.

IMPORTANT: All component text/labels can be found in lang/bladewind.php. You can translate these into your preferred languages

Option	Default	Available Values
name	checkbox	This name can be accessed when the checkbox is submitted in the form. The name is also available as part of the css classes.
label	blank	Text to be displayed next to the checkbox.
value	blank	In case you are editing a form, the value passed will be set on the value attribute of the checkbox. `<input type="checkbox" value="" ../>`
checked	false	Specifies whether the checkbox is checked or not. Value needs to be set as a string not boolean. `true` `false`
disabled	false	Specifies whether the checkbox is disabled or not. Value needs to be set as a string not boolean. `true` `false`
add_clearing	true	Adds a margin to the bottom of the checkbox to separate it from the next form element. Value needs to be set as a string not boolean. `true` `false`
color	primary	Color of the checkbox rings. `primary` `red` `yellow` `green` `blue` `black` `cyan` `orange` `purple` `pink` `violet` `indigo` `fuchsia`
class	bw-checkbox	Any additional css classes can be added using this attribute.
label_css	mr-6	Applies styling to the checkbox label.
fill_from_old	false	Repopulate the field from `old()` when Laravel redirects back after a failed validation. Defaults to the `bladewind.forms.fill_from_old` config value. `true` `false`
show_validation_error	false	Give the field its error state and render `$errors->first()` beneath it. Defaults to the `bladewind.forms.show_validation_error` config value. `true` `false`
error_bag	null	Which error bag to read when `show_validation_error` is on. Leave it unset to use Laravel's default bag.

Checkbox with all attributes defined

        
            <x-bladewind::checkbox
                label="I agree to the terms and conditions"
                checked="false"
                disabled="false"
                name="tnc"
                value="yes"
                color="pink"
                label_css="font-bold"
                class="shadow-sm" />

The source file for this component is available in resources > views > components > bladewind > checkbox.blade.php