src/index.html

@@ -1692,11 +1692,29 @@
               <div class="row">
                 <div class="col-md-6">
                   <div class="form-check">
-                    <input class="form-check-input" id="default_checkbox" type="checkbox" value="">
+                    <input class="form-check-input" id="checkbox-default-1" type="checkbox" value="" checked>
-                    <label class="form-check-label" for="default_checkbox">
+                    <label class="form-check-label" for="checkbox-default-1">
-                      Default checkbox
+                      Default checkbox one
                     </label>
                   </div>
+                  <div class="form-check">
+                    <input class="form-check-input" id="checkbox-default-2" type="checkbox" value="" checked>
+                    <label class="form-check-label" for="checkbox-default-2">
+                      Default checkbox two
+                    </label>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label class="form-check-custom">
+                    Custom checkbox one
+                    <input type="checkbox" value="" checked>
+                    <span class="form-check-custom-mark"></span>
+                  </label>
+                  <label class="form-check-custom">
+                    Custom checkbox two
+                    <input type="checkbox" value="">
+                    <span class="form-check-custom-mark"></span>
+                  </label>
                 </div>
               </div>
               <hr>

src/styles/_forms.sass

@@ -217,6 +217,8 @@ select
   +margin(0, top)
 
 .form-check-label
+  +fw-normal
+
   &:hover
     cursor: pointer
 
@@ -229,3 +231,49 @@ select
 [type="checkbox"]
   &:hover
     cursor: pointer
+
+.form-check-custom
+  cursor: pointer
+  display: block
+  +fw-normal
+  +margin(3, bottom)
+  padding-left: calc(var(--spacer) * 2)
+  position: relative
+
+  input
+    height: 0
+    opacity: 0
+    width: 0
+
+  .form-check-custom-mark
+    background-color: var(--input-color-bg)
+    border: var(--border-width) solid var(--border-color)
+    height: var(--spacer-4)
+    left: 0
+    position: absolute
+    top: 0
+    width: var(--spacer-4)
+
+    &:after
+      content: ""
+      display: none
+      position: absolute
+
+  &:hover input ~ .form-check-custom-mark
+    background-color: var(--input-color-bg-hover)
+
+  input:checked ~ .form-check-custom-mark
+    background-color: var(--color-accent)
+
+    &:after
+      display: block
+
+  .form-check-custom-mark:after
+    border: solid white
+    border-width: 0 .2rem .2rem 0
+    display: none
+    height: 1.0rem
+    left: .8rem
+    top: .4rem
+    transform: rotate(45deg)
+    width: .6rem