Converting Checkboxes to Toggles with Bootstrap Toggle

Tl;dr:

• This project is cloneable in Webflow - find it here.
• There are 3 external code snippets & stylesheets being referenced within the Page's Custom Code settings:

1. Disabled Styles [OPTIONAL] - The styles relate to the :disabled state of the toggle switch. If you have any desire to disable the toggle (making them unclickable), I recommend including this or forking it (copying and creating your own version) in Github. Otherwise, you can remove it!‍
2. Bootstrap Toggle Styles [REQUIRED]
3. Bootstrap Toggle's Javascript Library [REQUIRED]

While building a side project recently, I found myself needing to incorporate a "switch" of sorts within my web app — ideally it would be a toggle switch. With Webflow, this isn't a native option but you can get pretty damn close with a few different methods:

• Use IX 2.0: You can create a checkbox element, set the opacity to 0, and create your own version of a toggle in Webflow. Check out this cloneable project from the great Sidney Ottelohe for help!
• Use Lottie: Admittedly, I have no experience with Lottie, but you should be able to use Lottie to animate a checkbox element.
• Use Bootstrap Toggle: Bootstrap Toggle automatically converts checkboxes to toggles with ease. This method is my preferred method, as I think it's really easy to get up-and-running in minimal time without sacrificing any functionality.

I stumbled across Bootstrap Toggle while working on my side project. As I said above, it's a Javascript library that was intended to convert checkbox elements to (functioning!) toggle switches. It was originally intended to work within projects using the official Bootstrap styles, but I wanted to extend this a little further and allow Webflow users to create their own version of Bootstrap Styles visually and achieve the same functionality with minimal programming knowledge required.

So... we built it! You can see and clone the project into your Webflow Dashboard here, but let's get into what you need if you're building your project from scratch.

Step 1: Include the Code Snippets

On the page containing the checkboxes that you want to turn into toggles, paste in the following code into the {% code-line %}Before < / body > tag{% code-line-end %} area:

{% code-block language="html" %}
<link href="https://rileyrichter.github.io/visualdev.fm/bootstrap-toggle/disabled.css" rel="stylesheet">
<!--- The above stylesheet is an OPTIONAL file in your final project. It contains styles relating to the :disabled state, which is shown to the enduser IF a toggle is disabled. We unfortunately can't style the :disabled statein Webflow natively (yet!), which is why we have to hand-write these styles.If you don't care for the :disabled state, then we would recommend deleting thisreference! Learn more about the disabled state here: https://www.w3schools.com/cssref/sel_disabled.asp--->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
{% code-block-end %}

{% code-block language="hmtl" %}
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
   $("#btnOn").click(function(){
       $('#toggle-demo').bootstrapToggle('on');
   });
   $("#btnOff").click(function(){
       $('#toggle-demo').bootstrapToggle('off');
   });
   $("#btnToggle").click(function(){
       $('#toggle-demo').bootstrapToggle('toggle');
   });
   $("#btnEnable").click(function(){
       $('#toggle-demo').bootstrapToggle('enable');
   });
   $("#btnDisable").click(function(){
       $('#toggle-demo').bootstrapToggle('disable');
   });
});
</script>
{% code-block-end %}

There's a few different pieces here, so let's address each piece-by-piece:

• Disabled Styles: {% code-line %}<link href="https://rileyrichter.github.io/visualdev.fm/bootstrap-toggle/disabled.css" rel="stylesheet">{% code-line-end %} - This is an optional inclusion relating to the styles of the {% code-line %}:disabled{% code-line-end %} state of a toggle. If you have a desire to disable toggles at any time (make them untoggleable, if that's a word)

• Bootstrap Toggle's CSS: {% code-line %}Bootstrap Toggle's CSS: <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">{% code-line-end %} - as per Bootstrap Toggle's documentation, this is a required inclusion.
• Bootstrap Toggle's Javascript File: {% code-line %}<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>{% code-line-end %} - this is where the real meat-and-potatoes of Bootstrap Toggle come into play. We don't need to worry about how this works (just that it's the piece that converts checkboxes to toggles), but note that this is a required inclusion.
• All of the Javascript Functions after the above — this is most definitely optional and mainly included to show you (in our cloneable project) that the toggle element is accessible via Javascript and what methods exist, as per the documentation, so if you're at all interested in controlling the toggle with Javascript/jQuery, these snippets show you give you the run-down.

Step 2: Copy the Style Guide OR Include Bootstrap Styles

Bootstrap Toggle works by using Bootstrap's style sheet to style the toggle elements themselves. You've got two options when it comes to how you want to style the toggles:

(1) USE VISUAL STYLES (within Webflow)

If you don't want to have to adhere to Bootstrap Styles and want to control the specifics of how your toggles look, we recommend simply copy-and-pasting the style guide from our cloneable project into yours. Cross-project copy-and-paste only works if you have cloneable the project yourself (doesn't work on read-only links), so be sure you clone it first.

IMPORTANT: If you do this, make sure that you are not using any of the following classes in your project, as they're required for Bootstrap Toggle:

{% code-line %}btn{% code-line-end %}, {% code-line %}.btn-primary{% code-line-end %}, {% code-line %}.btn-secondary{% code-line-end %}, {% code-line %}btn-success{% code-line-end %}, {% code-line %}.btn-info{% code-line-end %}, {% code-line %}.btn-warning{% code-line-end %}, {% code-line %}.btn-danger{% code-line-end %}, {% code-line %}.btn-light{% code-line-end %}, and {% code-line %}.btn-dark{% code-line-end %} .

The style guide itself is closely matched to Bootstrap's Default Colors to begin with, with each color being created as what's known as a Global Swatch in Webflow. Global Swatches allow you to change the color in one place (the style panel) and have the change reflected site-wide on EVERY element using that color swatch. It's incredible when it comes to saving time.

Furthermore, most colors you see here have a similar (but noticeably different) color pair — this is used for the {% code-line %}:hover{% code-line-end %} state on the toggles! You can alter this via the style panel as well. (How do I access and style the hover state?)

(2) USE BOOTSTRAP STYLES (Bootstrap Default)

If you like Bootstrap's Default Styles, have no intention of changing them, and want to include just get started without having to do cross-site copy-and-paste, replace the FIRST {% code-line %}< link >{% code-line-end %} element listed above (the rileyrichter.github.io element) with the following:

{% code-block language="html" %}
<link href="https://rileyrichter.github.io/visualdev.fm/bootstrap-toggle/Full-CSS-Bootstrap-Styles.css" rel="stylesheet">
{% code-block-end %}

This style sheet excludes pretty much every default Bootstrap Style that you DON'T need for Bootstrap Toggle. This step and file is required if you do not copy-and-paste the style guide from our project. If you see a line (or lines) of CSS that can be removed even more, let us know or create a pull request on Github.

Step 3: Create the Checkbox/Toggle!

This is pretty much the final step! Drag an {% code-line %}Embed{% code-line-end %} element onto the page and inside of it, add the following code at a minimum:

{% code-block language="html" %}
<input type="checkbox" data-toggle="toggle">
{% code-block-end %}

The {% code-line %}data-toggle="toggle"{% code-line-end %} attribute is incredibly important here, as that's how Bootstrap Toggle knows what checkboxes to convert to toggles and which ones to leave alone. You MUST have this attribute on any checkbox element you want converted to a toggle.

There are also other attributes you can add to the {% code-line %}< input >{% code-line-end %} element to extend the functionality / design:

• Colors: Add the {% code-line %}Data-onstyle=“CLASS"{% code-line-end %} — any of the following can be used:
  
  {% code-line %}data-onstyle="primary"{% code-line-end %},
  {% code-line %}data-onstyle="success"{% code-line-end %},
  {% code-line %}data-onstyle="info"{% code-line-end %},
  {% code-line %}data-onstyle="warning"{% code-line-end %},
  {% code-line %}data-onstyle="danger"{% code-line-end %}, and
  {% code-line %}data-onstyle="default"{% code-line-end %}

• Mixing Colors: If you like one of the above colors for the ON state but another for the OFF state, you can mix-and-match colors! Use the {% code-line %}data-onstyle="COLOR"{% code-line-end %} for the ON style and {% code-line %}data-offstyle="COLOR"{% code-line-end %} for the OFF style.
  ‍
• Bootstrap Sizes: You can use {% code-line %}data-size="SIZE"{% code-line-end %} and take advantage of Bootstrap default sizes, passing in either ;{% code-line %}large{% code-line-end %}, {% code-line %}normal{% code-line-end %}, or {% code-line %}small{% code-line-end %}.
  ‍
• Custom Sizes: You can also opt to use your own width and height for the toggles by passing in {% code-line %}data-width="NUMBER"{% code-line-end %} and {% code-line %}data-height="NUMBER"{% code-line-end %} respectively, where the number is the pixel value you desire.
  ‍
• Custom Text for ON/OFF States: Want to change the text from "On" or "Off"? Add in the {% code-line %}data-on="TEXT FOR ON"{% code-line-end %} and {% code-line %}data-off="TEXT FOR OFF"{% code-line-end %} attributes!
  ‍
• Use Multiple Lines of Text: If you want to use a line break element ({% code-line %}< br >{% code-line-end %}), you can! Simply pass in the {% code-line %}< br >{% code-line-end %} itself in the custom string you want to use (see above) and you'll be set.
  ‍

Example attribute:

{% code-block language="html" %}
data-on="Hello<br>World" data-off="Goodbye<br>World"
{% code-block-end %}

• Change the Animation Speed of the Toggle: Animation speeds can also be varied using the CSS transition property. You must first declare the speed as a custom style (see cloneable project for more examples), and then pass Speed to the checkbox using the {% code-line %}data-style{% code-line-end %} attribute. For example, this would all be in one {% code-line %}embed{% code-line-end %} element for slow animation speeds:

{% code-block language="html" %}
<style>
     .slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
</style>
   
<input type="checkbox" checked data-toggle="toggle" data-style="slow" data-on="Slow" data-off="Speed">
{% code-block-end %}

Conclusion

The full documentation talks about more potential attributes you can add, so feel free to scan through that and add any attributes you'd like.

I hope this helps! All credit to the original maker of Bootstrap Toggle, Min Hur for The New York Times, for making this awesome library.