Switcher Buttons

  1. Xmino
  2. Components
  3. Switcher Buttons
Action Another action Something else here
Separated link
Switch Buttons

add the following line class="js-switch" data-color="#14abef" 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.

Colors

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

Disabled/Readonly

Just add disabled or readonly attribute to the <input type="checkbox"...>.

With Text

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

With Long Text

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

Label Text

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

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-switch to the <input type="radio"...>. If you want to change the class name, you have to change jquery according to that.