Checkbox
Bootstrap 4 Checkbox with Material Design UI
A checkbox is a component that allows user to select multiple choices from the list of available options.
Bootstrap 4 Checkbox
Bootstrap 4 provides 2 types of checkboxes - basic and custom. For basic checkbox, use class .form-check-input in the <input> tag and .form-check-label in the <label> tag and wrap both the elements with a <div> with class .form-check. For custom checkbox, use .custom-control-input in the <input> tag and .custom-control-label in the <label> tag and wrap both the elements with a <div> with classes .custom-control and .custom-checkbox.
Propeller Checkbox
Propeller applies Material design standards to the Bootstrap 4 custom checkbox to create Propeller checkbox. Add .pmd-checkbox besides .custom-checkbox to create Propeller customized checkbox. You can also add .pmd-checkbox-ripple-effect to the label to provide a ripple effect to the checkbox.
Inline Checkbox
Use .custom-control-inline besides .custom-control to create checkboxes that appear on the same line.
Inverse Checkbox
Use .bg-dark and .text-white to the card structure to create an inverse checkbox.
Checkbox Validation
You can even perform validations to the checkboxes.
Server Side Validation
Client Side Validation
Checkbox without Label
Use .position-static besides .custom-control-label to create checkboxes without labels.
jQuery Plugin
Call the jQuery plugin to initialize the checkbox while fetching the data dynamically.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the checkbox. The table lists the available classes and their effects.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-checkbox |
To create propeller customized checkbox | Optional |
.pmd-checkbox-ripple-effect |
Add this class to create ripple effect to checkboxes | Optional |