diff --git a/app/assets/stylesheets/shared_styles/elements/toggles.scss b/app/assets/stylesheets/shared_styles/elements/toggles.scss
new file mode 100644
index 000000000..34bcebabb
--- /dev/null
+++ b/app/assets/stylesheets/shared_styles/elements/toggles.scss
@@ -0,0 +1,100 @@
+input[type="checkbox"].sci-toggle-checkbox {
+  cursor: pointer;
+  flex-shrink: 0;
+  height: 16px;
+  margin: 0;
+  opacity: 0;
+  position: relative;
+  width: 24px;
+  z-index: 2;
+
+  + .sci-toggle-checkbox-label {
+    animation-timing-function: $timing-function-sharp;
+    background: $color-alto;
+    border-radius: 8px;
+    display: inline-block;
+    flex-shrink: 0;
+    height: 16px;
+    margin-left: -27px;
+    position: relative;
+    transition: .2s;
+    width: 24px;
+
+    &::before {
+      animation-timing-function: $timing-function-sharp;
+      background: $color-white;
+      border-radius: 7px;
+      content: "";
+      height: 12px;
+      left: 0;
+      margin: 2px;
+      position: absolute;
+      transition: .2s;
+      width: 12px;
+    }
+  }
+
+  &.hidden + .sci-toggle-checkbox-label {
+    display: none;
+  }
+
+  &:checked + .sci-toggle-checkbox-label {
+    background: $brand-primary;
+
+    &::before {
+      left: 8px;
+    }
+  }
+
+  &:disabled + .sci-toggle-checkbox-label {
+
+    &::before {
+      background: $color-silver-chalice;
+    }
+  }
+}
+
+.sci-toggles-group {
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  input[type="radio"].sci-toggle-item {
+    cursor: pointer;
+    height: 36px;
+    margin: 0;
+    opacity: 0;
+    position: relative;
+    width: 48px;
+    z-index: 2;
+
+    + .sci-toggle-item-label {
+      animation-timing-function: $timing-function-sharp;
+      background: $color-white;
+      border: $border-default;
+      border-left-color: transparent;
+      display: inline-block;
+      height: 36px;
+      line-height: 34px;
+      margin-left: -48px;
+      position: relative;
+      text-align: center;
+      transition: .2s;
+      width: 48px;
+
+      &:first-of-type {
+        border-left-color: $color-silver-chalice;
+        border-radius: $border-radius-default 0 0 $border-radius-default;
+      }
+      &:last-of-type {
+        border-radius: 0 $border-radius-default $border-radius-default 0;
+      }
+    }
+
+    &:checked + .sci-toggle-item-label {
+      background: $brand-primary;
+      border: 1px solid $brand-primary;
+      color: $color-white;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb
index 641b50ed0..2dd1f7795 100644
--- a/app/views/projects/index.html.erb
+++ b/app/views/projects/index.html.erb
@@ -222,4 +222,21 @@
     <input type="radio" name="test" class="sci-radio" disabled>
     <span class="sci-radio-label"></span>
   </div>
+  <hr>
+  <div>
+    <input type="checkbox" class="sci-toggle-checkbox">
+    <span class="sci-toggle-checkbox-label"></span>
+    <span style="display: inline-block; width: 20px"></span>
+    <input type="checkbox" class="sci-toggle-checkbox" disabled>
+    <span class="sci-toggle-checkbox-label"></span>
+  </div>
+  <hr>
+  <div class="sci-toggles-group">
+    <input type="radio" name="test1" class="sci-toggle-item">
+    <span class="sci-toggle-item-label"><i class="fas fa-th-large"></i></span>
+    <input type="radio" name="test1" class="sci-toggle-item">
+    <span class="sci-toggle-item-label"><i class="fas fa-th-list"></i></span>
+    <input type="radio" name="test1" class="sci-toggle-item">
+    <span class="sci-toggle-item-label"><i class="fas fa-th"></i></span>
+  </div>
 </div>