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 |