Documentation

This site gathers documentation of my GitHub projects

Checkradio

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

Colors Yes
Sizes Yes
Variables Yes

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

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


<div class="field">
  <input class="is-checkbox is-rtl" id="exampleRtlCheckbox" type="checkbox" name="exampleRtlCheckbox" checked="checked">
  <label for="exampleRtlCheckbox">Check me</label>
</div>
<div class="field">
  <input class="is-radio is-rtl" id="exampleRtlRadioInline1" type="radio" name="exampleRtlRadioInline" checked="checked">
  <label for="exampleRtlRadioInline1">Option 1</label>
  <input class="is-radio 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 exxample in Bulma's documentation.
(Input is not wrapped by the label)


Colors #

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

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

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

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

<div class="field">
  <input class="is-checkbox 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-checkbox is-white" id="exampleCheckboxWhite" type="checkbox" name="exampleCheckboxWhite" checked="checked">
    <label for="exampleCheckboxWhite">Checkbox - white</label>

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

Sizes #

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

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

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

<div class="field">
  <input class="is-checkbox is-large" id="exampleCheckboxLarge" type="checkbox" name="exampleCheckboxLarge" checked="checked">
  <label for="exampleCheckboxLarge">Checkbox - 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-checkbox is-circle" id="exampleCheckboxDefaultDisabledCircle" type="checkbox" name="exampleCheckboxDefaultDisabledCircle" checked="checked" disabled="disabled">
  <label for="exampleCheckboxDefaultDisabledCircle">Checkbox</label>
</div>

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

<div class="field">
  <input class="is-checkbox 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-checkbox 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-checkbox 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-checkbox 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-checkbox is-block" id="exampleCheckboxBlockDefault" type="checkbox" name="exampleCheckboxBlockDefault" checked="checked">
  <label for="exampleCheckboxBlockDefault">Checkbox</label>
</div>

<div class="field">
  <input class="is-checkbox 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-checkbox 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-checkbox 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-checkbox 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-checkbox is-block is-white" id="exampleCheckboxBlockWhite" type="checkbox" name="exampleCheckboxBlockWhite" checked="checked">
    <label for="exampleCheckboxBlockWhite">Checkbox - white</label>

    <input class="is-checkbox 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-checkbox has-no-border" id="exampleCheckboxNoBorderDefault" type="checkbox" name="exampleCheckboxNoBorderDefault" checked="checked">
  <label for="exampleCheckboxNoBorderDefault">Checkbox</label>
</div>

<div class="field">
  <input class="is-checkbox 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-checkbox 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-checkbox 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-checkbox 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-checkbox has-no-border is-white" id="exampleCheckboxNoBorderWhite" type="checkbox" name="exampleCheckboxNoBorderWhite" checked="checked">
    <label for="exampleCheckboxNoBorderWhite">Checkbox - white</label>

    <input class="is-checkbox has-no-border is-white" id="exampleCheckboxNoBorderWhite2" type="checkbox" name="exampleCheckboxNoBorderWhite2">
    <label for="exampleCheckboxNoBorderWhite2">Checkbox - 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-checkbox has-background-color" id="exampleCheckboxBackgroundColorDefault" type="checkbox" name="exampleCheckboxBackgroundColorDefault" checked="checked">
  <label for="exampleCheckboxBackgroundColorDefault">Checkbox</label>
</div>

<div class="field">
  <input class="is-checkbox 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-checkbox 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-checkbox 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-checkbox 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-checkbox has-background-color is-white" id="exampleCheckboxBackgroundColorWhite" type="checkbox" name="exampleCheckboxBackgroundColorWhite" checked="checked">
    <label for="exampleCheckboxBackgroundColorWhite">Checkbox - white</label>

    <input class="is-checkbox has-background-color is-white" id="exampleCheckboxBackgroundColorWhite2" type="checkbox" name="exampleCheckboxBackgroundColorWhite2">
    <label for="exampleCheckboxBackgroundColorWhite2">Checkbox - white</label>
  </div>
</div>

States

Disabled

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

Radio

<div class="field">
  <input class="is-radio" id="exampleRadio0" type="radio" name="exampleRadio" disabled>
  <label for="exampleRadio0">Radio choice - disabled</label>
</div>

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

<div class="field">
  <input class="is-radio is-small is-success" id="exampleRadio2" type="radio" name="exampleRadio">
  <label for="exampleRadio2">Radio choice - small</label>
</div>

<div class="field">
  <input class="is-radio is-medium is-danger" id="exampleRadio3" type="radio" name="exampleRadio">
  <label for="exampleRadio3">Radio choice - medium</label>
</div>

<div class="field">
  <input class="is-radio is-large is-warning" id="exampleRadio4" type="radio" name="exampleRadio">
  <label for="exampleRadio4">Radio choice - large</label>
</div>


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

    <input class="is-radio is-white" id="exampleRadioWhite2" type="radio" name="exampleRadioWhite">
    <label for="exampleRadioWhite2">Radio - white</label>
  </div>
</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

This page is designed with Bulma CSS framework.