BladewindUI
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 />
<x-bladewind.checkbox
label="I agree to the terms and conditions" />
<x-bladewind.checkbox
label="I agree to the <a href='/terms'>terms and conditions</a>" />
<x-bladewind.checkbox
label="I am checked by default"
checked="true" />
<x-bladewind.checkbox
label="I am disabled"
disabled="true" />
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" />
The table below shows a comprehensive list of all the attributes available for the Checkbox component.
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. |
<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" />
resources > views > components > bladewind > checkbox.blade.php