Checkradio

Make classic checkbox and radio more sexy in different colors, sizes, and states

Colors Yes
Sizes Yes
Javascript No
Variables Yes

<div class="field">
<input class="is-checkradio" id="exampleCheckbox" type="checkbox" name="exampleCheckbox" checked="checked">
<label for="exampleCheckbox">Check me</label>
</div>
<div class="field">
<input class="is-checkradio" id="exampleRadioInline1" type="radio" name="exampleRadioInline" checked="checked">
<label for="exampleRadioInline1">Option 1</label>
<input class="is-checkradio" id="exampleRadioInline2" type="radio" name="exampleRadioInline">
<label for="exampleRadioInline2">Option 2</label>
</div>

Use is-rtl to display a right-to-left design of checkbox or radio (text at left)


<div class="field">
<input class="is-checkradio is-rtl" id="exampleRtlCheckbox" type="checkbox" name="exampleRtlCheckbox" checked="checked">
<label for="exampleRtlCheckbox">Check me</label>
</div>
<div class="field">
<input class="is-checkradio is-rtl" id="exampleRtlRadioInline1" type="radio" name="exampleRtlRadioInline" checked="checked">
<label for="exampleRtlRadioInline1">Option 1</label>
<input class="is-checkradio is-rtl" id="exampleRtlRadioInline2" type="radio" name="exampleRtlRadioInline">
<label for="exampleRtlRadioInline2">Option 2</label>
</div>

Don't forget to set id attribute on input and for attribute on label with the same value to get it work. This will link the label to the checkbox and then handle the click.


Please note that due to CSS limitation the structure of the checkbox is different of the one provided as example in Bulma's documentation.
(Input is not wrapped by the label)


Colors #

<div class="field">
<input class="is-checkradio" id="exampleCheckboxDefault" type="checkbox" name="exampleCheckboxDefault" checked="checked">
<label for="exampleCheckboxDefault">Checkbox</label>
</div>

<div class="field">
<input class="is-checkradio is-success" id="exampleCheckboxSuccess" type="checkbox" name="exampleCheckboxSuccess" checked="checked">
<label for="exampleCheckboxSuccess">Checkbox - success</label>
</div>

<div class="field">
<input class="is-checkradio is-warning" id="exampleCheckboxWarning" type="checkbox" name="exampleCheckboxWarning" checked="checked">
<label for="exampleCheckboxWarning">Checkbox - warning</label>
</div>

<div class="field">
<input class="is-checkradio is-danger" id="exampleCheckboxDanger" type="checkbox" name="exampleCheckboxDanger" checked="checked">
<label for="exampleCheckboxDanger">Checkbox - danger</label>
</div>

<div class="field">
<input class="is-checkradio is-info" id="exampleCheckboxInfo" type="checkbox" name="exampleCheckboxInfo" checked="checked">
<label for="exampleCheckboxInfo">Checkbox - info</label>
</div>

<div class="bd-notification is-dark">
<div class="field">
<input class="is-checkradio is-white" id="exampleCheckboxWhite" type="checkbox" name="exampleCheckboxWhite" checked="checked">
<label for="exampleCheckboxWhite">Checkbox - white</label>

<input class="is-checkradio is-white" id="exampleCheckboxWhite2" type="checkbox" name="exampleCheckboxWhite2">
<label for="exampleCheckboxWhite2">Checkbox - white</label>
</div>
</div>
<div class="field">
<input class="is-checkradio" id="exampleRadioDefault" type="radio" name="exampleRadioDefault" checked="checked">
<label for="exampleRadioDefault">Radio</label>
</div>

<div class="field">
<input class="is-checkradio is-success" id="exampleRadioSuccess" type="radio" name="exampleRadioSuccess" checked="checked">
<label for="exampleRadioSuccess">Radio - success</label>
</div>

<div class="field">
<input class="is-checkradio is-warning" id="exampleRadioWarning" type="radio" name="exampleRadioWarning" checked="checked">
<label for="exampleRadioWarning">Radio - warning</label>
</div>

<div class="field">
<input class="is-checkradio is-danger" id="exampleRadioDanger" type="radio" name="exampleRadioDanger" checked="checked">
<label for="exampleRadioDanger">Radio - danger</label>
</div>

<div class="field">
<input class="is-checkradio is-info" id="exampleRadioInfo" type="radio" name="exampleRadioInfo" checked="checked">
<label for="exampleRadioInfo">Radio - info</label>
</div>

<div class="bd-notification is-dark">
<div class="field">
<input class="is-checkradio is-white" id="exampleRadioWhite" type="radio" name="exampleRadioWhite" checked="checked">
<label for="exampleRadioWhite">Radio - white</label>

<input class="is-checkradio is-white" id="exampleRadioWhite2" type="radio" name="exampleRadioWhite2">
<label for="exampleRadioWhite2">Radio - white</label>
</div>
</div>

Sizes #

<div class="field">
<input class="is-checkradio is-small" id="exampleCheckboxSmall" type="checkbox" name="exampleCheckboxSmall" checked="checked">
<label for="exampleCheckboxSmall">Checkbox - small</label>
</div>

<div class="field">
<input class="is-checkradio" id="exampleCheckboxNormal" type="checkbox" name="exampleCheckboxNormal" checked="checked">
<label for="exampleCheckboxNormal">Checkbox</label>
</div>

<div class="field">
<input class="is-checkradio is-medium" id="exampleCheckboxMedium" type="checkbox" name="exampleCheckboxMedium" checked="checked">
<label for="exampleCheckboxMedium">Checkbox - medium</label>
</div>

<div class="field">
<input class="is-checkradio is-large" id="exampleCheckboxLarge" type="checkbox" name="exampleCheckboxLarge" checked="checked">
<label for="exampleCheckboxLarge">Checkbox - large</label>
</div>
<div class="field">
<input class="is-checkradio is-small" id="exampleRadioSmall" type="radio" name="exampleRadioSmall" checked="checked">
<label for="exampleRadioSmall">Radio - small</label>
</div>

<div class="field">
<input class="is-checkradio" id="exampleRadioNormal" type="radio" name="exampleRadioNormal" checked="checked">
<label for="exampleRadioNormal">Radio</label>
</div>

<div class="field">
<input class="is-checkradio is-medium" id="exampleRadioMedium" type="radio" name="exampleRadioMedium" checked="checked">
<label for="exampleRadioMedium">Radio - medium</label>
</div>

<div class="field">
<input class="is-checkradio is-large" id="exampleRadioLarge" type="radio" name="exampleRadioLarge" checked="checked">
<label for="exampleRadioLarge">Radio - large</label>
</div>

Styles

Circle

You can add is-circle modifier to the input to get a rounded checkbox


<div class="field">
<input class="is-checkradio is-circle" id="exampleCheckboxDefaultDisabledCircle" type="checkbox" name="exampleCheckboxDefaultDisabledCircle" checked="checked" disabled="disabled">
<label for="exampleCheckboxDefaultDisabledCircle">Checkbox</label>
</div>

<div class="field">
<input class="is-checkradio is-circle" id="exampleCheckboxDefaultCircle" type="checkbox" name="exampleCheckboxDefaultCircle" checked="checked">
<label for="exampleCheckboxDefaultCircle">Checkbox</label>
</div>

<div class="field">
<input class="is-checkradio is-success is-circle" id="exampleCheckboxSuccessCircle" type="checkbox" name="exampleCheckboxSuccessCircle" checked="checked">
<label for="exampleCheckboxSuccessCircle">Checkbox - success</label>
</div>

<div class="field">
<input class="is-checkradio is-warning is-circle" id="exampleCheckboxWarningCircle" type="checkbox" name="exampleCheckboxWarningCircle" checked="checked">
<label for="exampleCheckboxWarningCircle">Checkbox - warning</label>
</div>

<div class="field">
<input class="is-checkradio is-danger is-circle" id="exampleCheckboxDangerCircle" type="checkbox" name="exampleCheckboxDangerCircle" checked="checked">
<label for="exampleCheckboxDangerCircle">Checkbox - danger</label>
</div>

<div class="field">
<input class="is-checkradio is-info is-circle" id="exampleCheckboxInfoCircle" type="checkbox" name="exampleCheckboxInfoCircle" checked="checked">
<label for="exampleCheckboxInfoCircle">Checkbox - info</label>
</div>

Block

You can add is-block modifier to the input to get a full colored checkbox


<div class="field">
<input class="is-checkradio is-block" id="exampleCheckboxBlockDefault" type="checkbox" name="exampleCheckboxBlockDefault" checked="checked">
<label for="exampleCheckboxBlockDefault">Checkbox</label>
</div>

<div class="field">
<input class="is-checkradio is-block is-success" id="exampleCheckboxBlockSuccess" type="checkbox" name="exampleCheckboxBlockSuccess" checked="checked">
<label for="exampleCheckboxBlockSuccess">Checkbox - success</label>
</div>

<div class="field">
<input class="is-checkradio is-block is-warning" id="exampleCheckboxBlockWarning" type="checkbox" name="exampleCheckboxBlockWarning" checked="checked">
<label for="exampleCheckboxBlockWarning">Checkbox - warning</label>
</div>

<div class="field">
<input class="is-checkradio is-block is-danger" id="exampleCheckboxBlockDanger" type="checkbox" name="exampleCheckboxBlockDanger" checked="checked">
<label for="exampleCheckboxBlockDanger">Checkbox - danger</label>
</div>

<div class="field">
<input class="is-checkradio is-block is-info" id="exampleCheckboxBlockInfo" type="checkbox" name="exampleCheckboxBlockInfo" checked="checked">
<label for="exampleCheckboxBlockInfo">Checkbox - info</label>
</div>

<div class="bd-notification is-dark">
<div class="field">
<input class="is-checkradio is-block is-white" id="exampleCheckboxBlockWhite" type="checkbox" name="exampleCheckboxBlockWhite" checked="checked">
<label for="exampleCheckboxBlockWhite">Checkbox - white</label>

<input class="is-checkradio is-block is-white" id="exampleCheckboxBlockWhite2" type="checkbox" name="exampleCheckboxBlockWhite2">
<label for="exampleCheckboxBlockWhite2">Checkbox - white</label>
</div>
</div>

No border

Adding has-no-border modifier to the input will remove the checkbox border


<div class="field">
<input class="is-checkradio has-no-border" id="exampleCheckboxNoBorderDefault" type="checkbox" name="exampleCheckboxNoBorderDefault" checked="checked">
<label for="exampleCheckboxNoBorderDefault">Checkbox</label>
</div>

<div class="field">
<input class="is-checkradio has-no-border is-success" id="exampleCheckboxNoBorderSuccess" type="checkbox" name="exampleCheckboxNoBorderSuccess" checked="checked">
<label for="exampleCheckboxNoBorderSuccess">Checkbox - success</label>
</div>

<div class="field">
<input class="is-checkradio has-no-border is-warning" id="exampleCheckboxNoBorderWarning" type="checkbox" name="exampleCheckboxNoBorderWarning" checked="checked">
<label for="exampleCheckboxNoBorderWarning">Checkbox - warning</label>
</div>

<div class="field">
<input class="is-checkradio has-no-border is-danger" id="exampleCheckboxNoBorderDanger" type="checkbox" name="exampleCheckboxNoBorderDanger" checked="checked">
<label for="exampleCheckboxNoBorderDanger">Checkbox - danger</label>
</div>

<div class="field">
<input class="is-checkradio has-no-border is-info" id="exampleCheckboxNoBorderInfo" type="checkbox" name="exampleCheckboxNoBorderInfo" checked="checked">
<label for="exampleCheckboxNoBorderInfo">Checkbox - info</label>
</div>

<div class="bd-notification is-dark">
<div class="field">
<input class="is-checkradio has-no-border is-white" id="exampleCheckboxNoBorderWhite" type="checkbox" name="exampleCheckboxNoBorderWhite" checked="checked">
<label for="exampleCheckboxNoBorderWhite">Checkbox - white</label>

<input class="is-checkradio has-no-border is-white" id="exampleCheckboxNoBorderWhite2" type="checkbox" name="exampleCheckboxNoBorderWhite2">
<label for="exampleCheckboxNoBorderWhite2">Checkbox - white</label>
</div>
</div>
<div class="field">
<input class="is-checkradio has-no-border" id="exampleRadioNoBorderDefault" type="radio" name="exampleRadioNoBorderDefault" checked="checked">
<label for="exampleRadioNoBorderDefault">Radio</label>
</div>

<div class="field">
<input class="is-checkradio has-no-border is-success" id="exampleRadioNoBorderSuccess" type="radio" name="exampleRadioNoBorderSuccess" checked="checked">
<label for="exampleRadioNoBorderSuccess">Radio - success</label>
</div>

<div class="field">
<input class="is-checkradio has-no-border is-warning" id="exampleRadioNoBorderWarning" type="radio" name="exampleRadioNoBorderWarning" checked="checked">
<label for="exampleRadioNoBorderWarning">Radio - warning</label>
</div>

<div class="field">
<input class="is-checkradio has-no-border is-danger" id="exampleRadioNoBorderDanger" type="radio" name="exampleRadioNoBorderDanger" checked="checked">
<label for="exampleRadioNoBorderDanger">Radio - danger</label>
</div>

<div class="field">
<input class="is-checkradio has-no-border is-info" id="exampleRadioNoBorderInfo" type="radio" name="exampleRadioNoBorderInfo" checked="checked">
<label for="exampleRadioNoBorderInfo">Radio - info</label>
</div>

<div class="bd-notification is-dark">
<div class="field">
<input class="is-checkradio has-no-border is-white" id="exampleRadioNoBorderWhite" type="radio" name="exampleRadioNoBorderWhite" checked="checked">
<label for="exampleRadioNoBorderWhite">Radio - white</label>

<input class="is-checkradio has-no-border is-white" id="exampleRadioNoBorderWhite2" type="radio" name="exampleRadioNoBorderWhite2">
<label for="exampleRadioNoBorderWhite2">Radio - white</label>
</div>
</div>

Background colored

You can add has-background-color modifier to the input to get the checkbox background color impacted


<div class="field">
<input class="is-checkradio has-background-color" id="exampleCheckboxBackgroundColorDefault" type="checkbox" name="exampleCheckboxBackgroundColorDefault" checked="checked">
<label for="exampleCheckboxBackgroundColorDefault">Checkbox</label>
</div>

<div class="field">
<input class="is-checkradio has-background-color is-success" id="exampleCheckboxBackgroundColorSuccess" type="checkbox" name="exampleCheckboxBackgroundColorSuccess" checked="checked">
<label for="exampleCheckboxBackgroundColorSuccess">Checkbox - success</label>
</div>

<div class="field">
<input class="is-checkradio has-background-color is-warning" id="exampleCheckboxBackgroundColorWarning" type="checkbox" name="exampleCheckboxBackgroundColorWarning" checked="checked">
<label for="exampleCheckboxBackgroundColorWarning">Checkbox - warning</label>
</div>

<div class="field">
<input class="is-checkradio has-background-color is-danger" id="exampleCheckboxBackgroundColorDanger" type="checkbox" name="exampleCheckboxBackgroundColorDanger" checked="checked">
<label for="exampleCheckboxBackgroundColorDanger">Checkbox - danger</label>
</div>

<div class="field">
<input class="is-checkradio has-background-color is-info" id="exampleCheckboxBackgroundColorInfo" type="checkbox" name="exampleCheckboxBackgroundColorInfo" checked="checked">
<label for="exampleCheckboxBackgroundColorInfo">Checkbox - info</label>
</div>

<div class="bd-notification is-dark">
<div class="field">
<input class="is-checkradio has-background-color is-white" id="exampleCheckboxBackgroundColorWhite" type="checkbox" name="exampleCheckboxBackgroundColorWhite" checked="checked">
<label for="exampleCheckboxBackgroundColorWhite">Checkbox - white</label>

<input class="is-checkradio has-background-color is-white" id="exampleCheckboxBackgroundColorWhite2" type="checkbox" name="exampleCheckboxBackgroundColorWhite2">
<label for="exampleCheckboxBackgroundColorWhite2">Checkbox - white</label>
</div>
</div>
<div class="field">
<input class="is-checkradio has-background-color" id="exampleRadioBackgroundColorDefault" type="radio" name="exampleRadioBackgroundColorDefault" checked="checked">
<label for="exampleRadioBackgroundColorDefault">Radio</label>
</div>

<div class="field">
<input class="is-checkradio has-background-color is-success" id="exampleRadioBackgroundColorSuccess" type="radio" name="exampleRadioBackgroundColorSuccess" checked="checked">
<label for="exampleRadioBackgroundColorSuccess">Radio - success</label>
</div>

<div class="field">
<input class="is-checkradio has-background-color is-warning" id="exampleRadioBackgroundColorWarning" type="radio" name="exampleRadioBackgroundColorWarning" checked="checked">
<label for="exampleRadioBackgroundColorWarning">Radio - warning</label>
</div>

<div class="field">
<input class="is-checkradio has-background-color is-danger" id="exampleRadioBackgroundColorDanger" type="radio" name="exampleRadioBackgroundColorDanger" checked="checked">
<label for="exampleRadioBackgroundColorDanger">Radio - danger</label>
</div>

<div class="field">
<input class="is-checkradio has-background-color is-info" id="exampleRadioBackgroundColorInfo" type="radio" name="exampleRadioBackgroundColorInfo" checked="checked">
<label for="exampleRadioBackgroundColorInfo">Radio - info</label>
</div>

<div class="bd-notification is-dark">
<div class="field">
<input class="is-checkradio has-background-color is-white" id="exampleRadioBackgroundColorWhite" type="radio" name="exampleRadioBackgroundColorWhite" checked="checked">
<label for="exampleRadioBackgroundColorWhite">Radio - white</label>

<input class="is-checkradio has-background-color is-white" id="exampleRadioBackgroundColorWhite2" type="radio" name="exampleRadioBackgroundColorWhite2">
<label for="exampleRadioBackgroundColorWhite2">Radio - white</label>
</div>
</div>

States

Disabled

<div class="field">
<input class="is-checkradio" id="exampleCheckboxDisabled" type="checkbox" name="exampleCheckboxDisabled" checked="checked" disabled>
<label for="exampleCheckboxDisabled">Checkbox - disabled</label>
</div>
<div class="field">
<input class="is-checkradio" id="exampleRadioDisabled" type="radio" name="exampleRadioDisabled" checked="checked" disabled>
<label for="exampleRadioDisabled">Radio - disabled</label>
</div>
<div class="field">
<input class="is-checkradio" id="exampleCheckboxIndeterminate" type="checkbox" name="exampleCheckboxIndeterminate">
<label for="exampleCheckboxIndeterminate">Checkbox - indeterminate</label>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$checkbox-radius $radius
$checkbox-border .1rem solid $grey-lighter
$checkbox-block-background $white-ter
$checkradio-focus 1px dotted $grey-light