Toggle Switch

Bootstrap 4 Switches with Material Design UI

A toggle switch is a simple and interactive component used for activating one out of two predefined options. It is most commonly used as an on/off button.

Toggle Switch

Toggle Switch is - To switch from one setting to another. It implies that there are only two possible settings and that you are switching from the current setting to the other setting. For example, light switches that turn a light on or off are toggle switches.

Add .pmd-switch to the parent div and .pmd-switch-label to the tag containing label.


Inverse Toggle Switch

Use .bg-dark and .text-white to the card structure to create an inverse toggle switch.


Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the form elements. The table lists the available classes and their effects.

Propeller Class Effect Remark
.pmd-switch To create propeller customized toggle switch Optional
.pmd-switch-label Add this class to the label of the toggle switch Optional