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.

I am a red checkbox I am a yellow checkbox I am a green checkbox

I am a pink checkbox I am a cyan checkbox I am a black checkbox

I am a purple checkbox I am a orange checkbox I am a blue checkbox

        
            <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" />

Full List Of Attributes

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

IMPORTANT: Projects running Laravel 8 please read this

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`
class	bw-checkbox	Any additional css classes can be added using this attribute.
label_css	mr-6	Applies styling to the checkbox label.

Checkbox with all attributes defined

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

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