Custom Checkboxes And Radio Buttons For Bulma Framework

This package contains two CSS libraries that enable you to create beautiful custom checkbox and radio button inputs in the Bulma framework.

See Also:

• CSS Switch Control Extension For Bulma Framework

How to use it:

1. Download and load the following CSS files in your Bulma framework.

<!-- Bulma -->
<link rel="stylesheet" href="/path/to/bulma.min.css" />
<!-- Bulma Checkbox -->
<link rel="stylesheet" href="/path/to/bulma-checkbox-master/css/main.min.css">
<!-- Bulma Radio Button -->
<link rel="stylesheet" href="/path/to/bulma-radio-master/css/main.min.css">

2. Add custom checkboxes and radio buttons to the page.

<!-- Checkboxes -->
<label class="b-checkbox checkbox">
  <input type="checkbox" value="false" checked>
  <span class="check"></span>
  <span class="control-label">Checked</span>
</label>
<label class="b-checkbox checkbox">
  <input type="checkbox" value="false" class="is-indeterminate">
  <span class="check"></span>
  <span class="control-label">Indeterminate</span>
</label>
<label disabled="disabled" class="b-checkbox checkbox is-disabled">
  <input type="checkbox" disabled="disabled" value="false">
  <span class="check"></span>
  <span class="control-label">Disabled</span>
</label>
<!-- Radio Buttons -->
<label class="b-radio radio">
  <input type="radio" name="group_1" value="One" checked>
  <span class="check"></span>
  <span class="control-label">Checked</span>
</label>
<label class="b-radio radio">
  <input type="radio" name="group_1" value="Two">
  <span class="check"></span>
  <span class="control-label">Basic</span>
</label>
<label class="b-radio radio is-disabled" disabled>
  <input type="radio" name="group_1" value="Disabled" disabled>
  <span class="check"></span>
  <span class="control-label">Disabled</span>
</label>

3. Set the size of the checkbox & radio button using the following CSS classes:

• is-small
• is-medium
• is-large

<label class="b-checkbox checkbox is-small">
  <input type="checkbox" value="false" checked>
  <span class="check"></span>
  <span class="control-label">Checked</span>
</label>
<label class="b-checkbox checkbox is-medium">
  <input type="checkbox" value="false" class="is-indeterminate">
  <span class="check"></span>
  <span class="control-label">Indeterminate</span>
</label>
<label disabled="disabled" class="b-checkbox checkbox is-disabled is-large">
  <input type="checkbox" disabled="disabled" value="false">
  <span class="check"></span>
  <span class="control-label">Disabled</span>
</label>

4. Change the color of the checkbox & radio buttons using the following CSS classes:

• is-info
• is-success
• is-danger
• is-warning

<label class="b-checkbox checkbox">
  <input type="checkbox" value="false" checked>
  <span class="check is-info"></span>
  <span class="control-label">Checked</span>
</label>
<label class="b-checkbox checkbox is-medium">
  <input type="checkbox" value="false" class="is-indeterminate">
  <span class="check is-success"></span>
  <span class="control-label">Indeterminate</span>
</label>
<label disabled="disabled" class="b-checkbox checkbox is-disabled is-large">
  <input type="checkbox" disabled="disabled" value="false">
  <span class="check is-danger"></span>
  <span class="control-label">Disabled</span>
</label>
<label class="b-radio radio">
  <input type="radio" name="group_1" value="One" checked>
  <span class="check is-warning"></span>
  <span class="control-label">Checked</span>
</label>