diff --git a/docs-orange/_includes/boostwatch/switches.html b/docs-orange/_includes/boostwatch/switches.html
new file mode 100644
index 0000000000..9ddac6bb33
--- /dev/null
+++ b/docs-orange/_includes/boostwatch/switches.html
@@ -0,0 +1,49 @@
+Toggle and switches
+
+Switch
+
+
+ WiFi
+
+
+
+ Bluetooth
+
+
+
+ Notifications
+
+
+3 way toggle
+
+
+
+
+
+
+
+
+
+
+3 way toggle without outline
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs-orange/_includes/nav-boostwatch.html b/docs-orange/_includes/nav-boostwatch.html
index e95aef5fdc..597c082136 100644
--- a/docs-orange/_includes/nav-boostwatch.html
+++ b/docs-orange/_includes/nav-boostwatch.html
@@ -33,6 +33,9 @@
+
diff --git a/docs-orange/boostwatch/index.html b/docs-orange/boostwatch/index.html
index c58c1297d0..0250c69bf3 100644
--- a/docs-orange/boostwatch/index.html
+++ b/docs-orange/boostwatch/index.html
@@ -28,6 +28,7 @@ Orange Icons
{% include boostwatch/navbar.html %}
{% include boostwatch/megamenu.html %}
{% include boostwatch/buttons.html %}
+{% include boostwatch/switches.html %}
{% include boostwatch/typography.html %}
{% include boostwatch/forms.html %}
{% include boostwatch/navs.html %}
@@ -36,5 +37,3 @@ Orange Icons
{% include boostwatch/progressbar.html %}
{% include boostwatch/containers.html %}
{% include boostwatch/dialogs.html %}
-
-
diff --git a/scss/_custom.scss b/scss/_custom.scss
index bc32b0043d..fb966cf639 100644
--- a/scss/_custom.scss
+++ b/scss/_custom.scss
@@ -332,6 +332,12 @@ $btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;
+// toggle switches
+
+// $toggle-switch-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Cpath%20d%3D%22M7.732%2015.275l4.3%204.1L22.27%209.64M39.396%209.447l11.208%2011.106m-11.208%200L50.604%209.447%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.999%22%2F%3E%3Cview%20viewBox%3D%220%200%2030%2030%22%2F%3E%3Cview%20viewBox%3D%2230%200%2030%2030%22%2F%3E%3C%2Fsvg%3E");
+
+$toggle-switch-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%20width%3D%2260%22%20height%3D%2230%22%3E%3Cview%20viewBox%3D%220%200%2030%2030%22%2F%3E%3Cview%20viewBox%3D%2230%200%2030%2030%22%2F%3E%3Cpath%20d%3D%22M0%200h60v30H0z%22%2F%3E%3Cpath%20style%3D%22line-height%3Anormal%3Btext-indent%3A0%3Btext-align%3Astart%3Btext-decoration-line%3Anone%3Btext-decoration-style%3Asolid%3Btext-decoration-color%3A%23000000%3Btext-transform%3Anone%3Bblock-progression%3Atb%3Bisolation%3Aauto%3Bmix-blend-mode%3Anormal%22%20d%3D%22M40.452%208.383l-2.11%202.13L42.87%2015l-4.53%204.488%202.112%202.13%204.55-4.51%204.548%204.51%202.11-2.13L47.13%2015l4.53-4.488-2.11-2.13-4.55%204.51-4.548-4.51zM21.236%208.554l-9.203%208.752-3.267-3.116-2.07%202.17%205.333%205.086%2011.273-10.718-2.067-2.174z%22%20color%3D%22%23000%22%20font-family%3D%22sans-serif%22%20white-space%3D%22normal%22%20overflow%3D%22visible%22%20solid-color%3D%22%23000000%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
+
// Accordions
$accordion-arrow-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%207%22%3E%3Cpath%20d%3D%22M7%200l7%207H0l7-7z%22%2F%3E%3C%2Fsvg%3E");
diff --git a/scss/_o-buttons.scss b/scss/_o-buttons.scss
index d6421e742f..01feed97fd 100644
--- a/scss/_o-buttons.scss
+++ b/scss/_o-buttons.scss
@@ -401,3 +401,150 @@ fieldset[disabled] a.btn {
}
}
}
+
+// single toggle
+
+.switch {
+
+ &.form-group {
+ margin-bottom: 0;
+ }
+
+ input[type="checkbox"].toggle {
+ width: 1px;
+ height: 1px;
+ }
+
+ .toggle + label {
+ position: relative;
+ display: block;
+ cursor: pointer;
+ user-select: none;
+ outline: none;
+ }
+
+ input.toggle + label {
+ display: inline-block;
+ width: 3.75rem;
+ height: 1.875rem;
+ padding: 0;
+ margin: .3125rem 0;
+ }
+
+ input.toggle + label::before,
+ input.toggle + label::after {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ content: "";
+ }
+
+ input.toggle + label::before {
+ right: 0;
+ background-color: #000;
+ background-image: $toggle-switch-icon;
+ }
+
+ input.toggle + label::after {
+ top: 2px;
+ left: 2px;
+ width: 1.75rem;
+ height: 1.625rem;
+ margin-left: 1.75rem;
+ background-color: #fff;
+ transition: margin .4s;
+ }
+
+ input.toggle:checked + label::after {
+ margin-left: 0;
+ }
+}
+
+.switch input:focus.toggle + label::after {
+ outline: 1px #fff dotted;
+}
+
+// 3 way toggles
+
+.btn-group[data-toggle=buttons] {
+ border: 2px solid #000;
+
+ .btn {
+ width: 2.5rem;
+ padding-right: 0;
+ padding-left: 0;
+ margin: 0;
+ border-top: 0;
+ border-right: 2px solid #fff;
+ border-bottom: 0;
+ border-left: 2px solid #fff;
+
+ &:first-child {
+ margin-left: -2px;
+ border-left-color: #000;
+ }
+
+ &:last-child {
+ margin-right: -2px;
+ border-right-color: #000;
+ }
+
+ &.active {
+ color: #fff;
+ background-color: #000;
+ border-right-color: #000;
+ border-left-color: #000;
+ }
+
+ @include hover {
+ color: $brand-primary;
+ background-color: #fff;
+
+ &.active {
+ color: #fff;
+ background-color: #000;
+ border-right-color: #000;
+ border-left-color: #000;
+ }
+ }
+ }
+
+ &.no-outline {
+ border-color: transparent;
+
+ .btn {
+ border-top: 2px solid transparent;
+ border-bottom: 2px solid transparent;
+
+ &:first-child {
+ border-left-color: transparent;
+ }
+
+ &:last-child {
+ border-right-color: transparent;
+ }
+
+ &.active {
+ color: $brand-primary;
+ background-color: #fff;
+ border-color: transparent;
+ outline-color: #000;
+ }
+
+ @include hover {
+ color: #000;
+ background-color: #fff;
+ border-color: #000;
+
+ &.active {
+ color: $brand-primary;
+ background-color: #fff;
+ border-color: transparent;
+ outline-color: #000;
+ }
+ }
+ }
+ }
+}