Bulma Checkradio

Styled checkboxes and radio buttons as a Bulma extension.

The Checkradio extension replaces the native browser checkbox and radio controls with fully styled equivalents that inherit Bulma's color system and sizing scale. It supports color variants, sizes, block, circle, no-border, indeterminate and RTL modes out of the box.

Checkbox

Add the .is-checkradio class and type="checkbox" to your <input>. The <label> immediately following must reference the input via for.

<input class="is-checkradio" id="exampleCheckbox1" type="checkbox" name="exampleCheckbox1">
<label for="exampleCheckbox1">Checkbox</label>
<input class="is-checkradio" id="exampleCheckbox2" type="checkbox" name="exampleCheckbox2" checked>
<label for="exampleCheckbox2">Checkbox checked</label>
<input class="is-checkradio" id="exampleCheckbox3" type="checkbox" name="exampleCheckbox3" disabled>
<label for="exampleCheckbox3">Checkbox disabled</label>
<input class="is-checkradio" id="exampleCheckbox4" type="checkbox" name="exampleCheckbox4" checked disabled>
<label for="exampleCheckbox4">Checkbox checked disabled</label>

Radio Button

Use type="radio" with the same .is-checkradio class. Group radio inputs by sharing the same name attribute.

<input class="is-checkradio" id="exampleRadio1" type="radio" name="exampleRadio" value="1">
<label for="exampleRadio1">Radio One</label>
<input class="is-checkradio" id="exampleRadio2" type="radio" name="exampleRadio" value="2" checked>
<label for="exampleRadio2">Radio Two</label>
<input class="is-checkradio" id="exampleRadio3" type="radio" name="exampleRadio" value="3" disabled>
<label for="exampleRadio3">Radio Disabled</label>

Color Variations

Apply any Bulma color modifier like is-primary, is-info, etc. to tint the checkmark and border. 

<input class="is-checkradio is-primary" id="colorPrimary" type="checkbox" name="colorPrimary" checked>
<label for="colorPrimary">Primary</label>
<input class="is-checkradio is-info" id="colorInfo" type="checkbox" name="colorInfo" checked>
<label for="colorInfo">Info</label>
<input class="is-checkradio is-success" id="colorSuccess" type="checkbox" name="colorSuccess" checked>
<label for="colorSuccess">Success</label>
<input class="is-checkradio is-warning" id="colorWarning" type="checkbox" name="colorWarning" checked>
<label for="colorWarning">Warning</label>
<input class="is-checkradio is-danger" id="colorDanger" type="checkbox" name="colorDanger" checked>
<label for="colorDanger">Danger</label>
<input class="is-checkradio is-link" id="colorLink" type="checkbox" name="colorLink" checked>
<label for="colorLink">Link</label>

Sizing

Choose the right size using is-small, is-medium, or is-large. 

<input class="is-checkradio is-small" id="sizeSmall" type="checkbox" name="sizeSmall" checked>
<label for="sizeSmall">Small</label>
<input class="is-checkradio" id="sizeNormal" type="checkbox" name="sizeNormal" checked>
<label for="sizeNormal">Normal</label>
<input class="is-checkradio is-medium" id="sizeMedium" type="checkbox" name="sizeMedium" checked>
<label for="sizeMedium">Medium</label>
<input class="is-checkradio is-large" id="sizeLarge" type="checkbox" name="sizeLarge" checked>
<label for="sizeLarge">Large</label>

Circle Variant

Add is-circle to a checkbox to give it rounded corners like a radio button.

Block Mode

Add is-block to make the label span the full width, turning the control into a block-level toggle button.

Indeterminate State

The indeterminate property (set via JavaScript) renders a horizontal dash, useful for "select all" toggles in tables. 

const el = document.getElementById('indetermChk');
el.indeterminate = true;

RTL Support

Add is-rtl to mirror the control for right-to-left layouts.