Simple FA5 Checkboxes

Getting Started

Download the stylesheet from GitHub, or grab it from npm.

npm install @cityssm/simple-fa5-checkbox

Add the stylesheet to your page, and wrap your input and label tags in a .facheck wrapper.

Checkbox Examples

Checkbox in regular style

Checkbox in solid style

Checkbox in solid style when checked

Checkbox in regular style when checked

Code Example

<p class="facheck">
  <input id="checkboxID" type="checkbox" checked />
  <label for="checkboxID">Checkbox</label>
</p>

Radio Buttons

Code Example

<p class="facheck facheck-fas facheck-inline">
  <input id="radioID" name="radioB" type="radio" checked />
  <label for="radioID">Radio Option</label>
</p>

Using the Bulma Framework

The Bulma framework is by no means required, but if you are using it, you can use the facheck-bulma.min.css stylesheet instead for Bulma-specific styles.

  <p class="facheck is-success">
    <input id="checkbox-success" type="checkbox" checked />
    <label for="checkbox-success">Success Checkbox</label>
  </p>

<p class="facheck facheck-fas-checked is-danger has-checked-success">
  <input id="checkboxID" type="checkbox" checked />
  <label for="checkboxID">Checkbox</label>
</p>