Switcher Buttons

  1. DashRock
  2. Components
  3. Switcher Buttons
ActionAnother actionSomething else here
Separated link
Switch Buttons

add the following line class="js-switch" data-color="#008cff"to your input element.

Large Sizes

You can add data-size="large"to your input element for different sizes.

Small Sizes

You can add data-size="small"to your input element for different sizes.

Secondary color

You can apply data-color="@color" data-secondary-color="@color"to your input element to both color.

Bootstrap Switch Buttons

Sizes

Just add data-size="Size"attribute to the <input type="checkbox"...>. Size values: mini, small, normal, large.

ON OFF
ON OFF
ON OFF
ON OFF

Colors

Just add data-on-color="Color"& data-off-color="Color"to the <input type="checkbox"...>. Color values: primary, info, success, warning, danger, default.

ON OFF
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF

Disabled/Readonly

Just add disabledor readonlyattribute to the <input type="checkbox"...>.

ON OFF
ON OFF

With Text

Just add data-on-text="Text"& data-off-text="Text"to the <input type="checkbox"...>.

Yes No
1 0

With Long Text

Just add data-on-text="Long Text"& data-off-text="Long Text"to the <input type="checkbox"...>.

Explicit Implicit
Enabled Disabled

Label Text

Just add data-on-text="Text"or data-off-text="Text"to the <input type="checkbox"...>.

Radio OFF
ON Waves

With HTML

Just add data-on-text="HTML Text"& data-off-text="HTML Text"to the <input type="checkbox"...>.

 
 

Radio Buttons

Just add class radio-switchto the <input type="radio"...>. If you want to change the class name, you have to change jquery according to that.

ON OFF
ON OFF
ON OFF