diff --git a/src/index.html b/src/index.html
index 35c4076..347a0a1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1274,7 +1274,7 @@
               <li>Item One</li>
               <li>Item Two</li>
             </ul>
-            <hr />
+            <hr>
             <p>
               Add <code>list-inline</code> for inline layout.
             </p>
@@ -1603,73 +1603,60 @@
         <div class="col-md-12">
           <form class="form-horizontal">
             <fieldset>
-
               <div class="row">
                 <div class="col-md-6">
-                  <label>Label for full width input</label>
-                  <div class="form-group form-group-lg width-full">
-                    <span class="form-group-addon"><i class="bf-network"></i></span>
-                    <input class="form-control" placeholder="Full freakin width, from here << to theeeere >>"
-                      type="text" />
+                  <label>Field with text only</label>
+                  <div class="form-group">
+                    <input class="form-control" placeholder="Default Text" type="text" />
+                  </div>
+
+                  <label>Field with required text</label>
+                  <span class="form-required-indicator">*</span>
+                  <div class="form-group">
+                    <input class="form-control" placeholder="Required Text" type="text" required />
+                  </div>
+
+                  <label>Bunch of inputs on top of each other</label>
+                  <div class="form-group">
+                    <span class="form-group-addon"><i class="i-file-video-o"></i></span>
+                    <input class="form-control" placeholder="Default Text (disabled)" type="text" disabled />
+                    <div class="form-text">
+                      Sorry, this field looks too awesome
+                    </div>
                   </div>
                 </div>
                 <div class="col-md-6">
                   <label for="last_name">Field with button on the right</label>
-                  <div class="form-group form-group-lg width-full">
+                  <div class="form-group">
                     <input type="text" class="form-control collection-user" placeholder="I've got a button!">
                     <span class="form-group-addon">
                       <button title="Hi!"><i class="i-cancel"></i></button>
                     </span>
                   </div>
-                </div>
-              </div>
-
-              <hr />
-
-              <div class="row">
-                <div class="col-md-6">
-                  <label>This is just form-group, not large</label>
-                  <div class="form-group width-full">
-                    <input class="form-control" placeholder="Default Text" type="text" />
-                  </div>
-                </div>
-                <div class="col-md-6">
-                  <label>Video Example</label>
-                  <div class="form-group form-group-lg width-full">
-                    <span class="form-group-addon"><i class="i-reel"></i></span>
-                    <input class="form-control" placeholder="Default Text" type="text" />
+                  <label for="city">City</label>
+                  <div class="form-group has-error">
+                    <span class="form-group-addon"><i class="i-map-marker"></i></span>
+                    <input class="form-control" id="city" name="city" placeholder="City" type="text" value="Amsterdam">
+                    <div class="form-text">
+                      Can't hear you over the beauty of this field
+                    </div>
                   </div>
                 </div>
               </div>
 
-              <div class="row">
-                <div class="col-md-6">
-                  <p>
-                    You can also add a <code>disabled</code> class to the <code>form-group</code>.
-                  </p>
-                </div>
-                <div class="col-md-6">
-                  <label>Video Example (disabled)</label>
-                  <div class="form-group form-group-lg width-full">
-                    <span class="form-group-addon"><i class="i-reel"></i></span>
-                    <input class="form-control" placeholder="Default Text (disabled)" type="text" disabled />
-                  </div>
-                </div>
-              </div>
-
-              <hr />
+              <hr>
 
               <div class="row">
                 <div class="col-md-6">
-                  <label>Image Upload</label>
-                  <div class="form-group form-group-lg width-full">
-                    <span class="form-group-addon"><i class="i-image"></i></span>
+                  <label>File Upload</label>
+                  <div class="form-group">
+                    <span class="form-group-addon"><i class="i-file"></i></span>
                     <input class="form-control" type="file" />
                   </div>
                 </div>
-                <div class="col-md-3">
+                <div class="col-md-6">
                   <label>Select the fastest render engine ever</label>
-                  <div class="form-group form-group-lg width-full">
+                  <div class="form-group">
                     <select class="form-control">
                       <option>Blender Internal</option>
                       <option>Blender Eternal</option>
@@ -1680,10 +1667,8 @@
                       <option disabled>Deal with it.</option>
                     </select>
                   </div>
-                </div>
-                <div class="col-md-3">
                   <label>Banana</label>
-                  <div class="form-group form-group-lg width-full">
+                  <div class="form-group">
                     <span class="form-group-addon"><i class="i-bug"></i></span>
                     <select class="form-control">
                       <option disabled>For Scale</option>
@@ -1692,53 +1677,81 @@
                 </div>
               </div>
 
-              <hr />
+              <hr>
 
               <div class="row">
                 <div class="col-md-6">
 
                   <label>Long stuff go in textareas</label>
-                  <div class="form-group form-group-lg width-full">
+                  <div class="form-group">
                     <textarea class="form-control" placeholder="Default Text"></textarea>
                   </div>
 
-                  <hr />
+                  <hr>
 
                   <button class="btn btn-success width-half pull-right" type="submit">
                     <i class="i-send"></i> Send Stuff!
                   </button>
                 </div>
+              </div>
+              <hr>
+              <div class="row">
                 <div class="col-md-6">
-                  <label class="form-check-label" for="work_travel">This is a checkbox.</label>
                   <div class="form-check">
-                    <input class="form-check-input" id="work_travel" name="work_travel"
-                      placeholder="Are you available to travel?" type="checkbox">
+                    <input class="form-check-input" id="checkbox-default-1" type="checkbox" value="" checked>
+                    <label class="form-check-label" for="checkbox-default-1">
+                      Default checkbox one
+                    </label>
                   </div>
-
-                  <label for="work_online">This one has form-group and form-group-lg</label>
-                  <div class="form-group form-group-lg">
-                    <input checked="" class="form-control" id="work_online" name="work_online"
-                      placeholder="Are you available to travel?" type="checkbox">
+                  <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>
-
-                  <label>Bunch of inputs on top of each other</label>
-                  <div class="form-group form-group-lg width-full disabled has-error">
-                    <span class="form-group-addon"><i class="i-file-video-o"></i></span>
-                    <input class="form-control" placeholder="Default Text (disabled)" type="text" />
-                  </div>
-                  <p class="error">
-                    Sorry, this field looks too awesome
-                  </p>
-
-                  <label for="city">City</label>
-                  <div class="form-group form-group-lg width-full has-error">
-                    <span class="form-group-addon"><i class="i-map-marker"></i></span>
-                    <input class="form-control" id="city" name="city" placeholder="City" type="text" value="Amsterdam">
-                  </div>
-                  <p class="error">
-                    Can't hear you over the beauty of this field
-                  </p>
                 </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>
+              <div class="row">
+                <div class="col-md-6">
+                  <div class="form-check">
+                    <input class="form-check-input" id="radios-default-1" name="radios-default" type="radio" value="option-1" checked>
+                    <label class="form-check-label" for="radios-default-1">
+                      Default radio 1
+                    </label>
+                  </div>
+                  <div class="form-check">
+                    <input class="form-check-input" id="radios-default-2" name="radios-default" type="radio" value="option-2">
+                    <label class="form-check-label" for="radios-default-2">
+                      Default radio 2
+                    </label>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label class="form-check-custom form-check-custom-radio">
+                    Custom radio one
+                    <input name="radio" type="radio" value="" checked>
+                    <span class="form-check-custom-mark"></span>
+                  </label>
+                  <label class="form-check-custom form-check-custom-radio">
+                    Custom radio two
+                    <input name="radio" type="radio" value="">
+                    <span class="form-check-custom-mark"></span>
+                  </label>
+                </div>
+              </div>
             </fieldset>
           </form>
           <!-- // Forms. -->
@@ -1747,14 +1760,57 @@
       <hr>
       <div class="row">
         <div class="col-md-6">
-          <label class="toggle-bar">
-            <input type="checkbox">
-            <span class="slider"></span>
-          </label>
-          <label class="toggle-bar toggle-bar-sm">
-            <input type="checkbox">
-            <span class="slider"></span>
-          </label>
+          <div class="mb-3">
+            <label class="me-3">Toggle bar</label>
+            <label class="toggle-bar">
+              <input type="checkbox">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div>
+            <label class="me-3">Toggle bar small</label>
+            <label class="toggle-bar toggle-bar-sm">
+              <input type="checkbox">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="col-md-6">
+          <label>Slider</label>
+          <input class="slider-custom" id="slider-custom" min="1" max="100" type="range" value="50">
+        </div>
+        <div class="col-md-6">
+          <div class="mb-5">
+            <label>Slider with step markers (default)</label>
+            <input class="slider-custom" id="slider-custom" min="1" max="9" type="range" value="5">
+            <div class="slider-custom-steps">
+              <div class="slider-custom-steps-item"></div>
+              <div class="slider-custom-steps-item"></div>
+              <div class="slider-custom-steps-item"></div>
+              <div class="slider-custom-steps-item"></div>
+              <div class="slider-custom-steps-item"></div>
+              <div class="slider-custom-steps-item"></div>
+              <div class="slider-custom-steps-item"></div>
+              <div class="slider-custom-steps-item"></div>
+              <div class="slider-custom-steps-item"></div>
+            </div>
+          </div>
+          <label>Slider with step markers (dots)</label>
+          <input class="slider-custom" id="slider-custom" min="1" max="9" type="range" value="5">
+          <div class="slider-custom-steps">
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+            <div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
+          </div>
         </div>
       </div>
 
@@ -1782,7 +1838,7 @@
 
         </div>
 
-        <hr />
+        <hr>
 
       </div> <!-- centered container for the page-->
     </div> <!-- container-main -->
diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass
index 5334ca0..967463b 100644
--- a/src/styles/_forms.sass
+++ b/src/styles/_forms.sass
@@ -1,3 +1,4 @@
+// TODO: refactor and organize styles
 .form
   +list-unstyled
   +inputs-generic
@@ -12,7 +13,6 @@
   .input-group-addon
     border-color: var(--color-danger)
 
-
 .form-text, .helptext
   color: var(--color-text-secondary)
   font-size: var(--fs-sm)
@@ -26,6 +26,17 @@
   &:focus
     border-color: var(--color-accent)
 
+  // TODO: check if using form-control with checkbox and radio is a real use case
+  &[type="checkbox"],
+  &[type="radio"]
+    height: var(--spacer)
+    min-height: 0
+    width: auto
+
+  &[type="checkbox"]
+    &:hover
+      cursor: pointer
+
   &[type="file"]
     padding: 0
 
@@ -62,25 +73,29 @@ input,
 
   background-color: var(--input-color-bg)
   color: var(--color-text)
-  height: calc(var(--spacer) * 2.5)
+  min-height: calc(var(--spacer) * 2.5)
   +padding(3, x)
   +padding(2, y)
 
   +media-sm
-    height: var(--spacer-5)
+    min-height: var(--spacer-5)
 
   &:disabled
     --input-color-bg-hover: var(--input-color-bg)
 
+    background-color: var(--input-color-bg)
     cursor: not-allowed
 
+    &::placeholder
+      color: var(--color-text-tertiary)
+
   &:focus,
   &:hover
     background-color: var(--input-color-bg-hover)
     color: var(--color-text)
 
   &::placeholder
-    color: var(--color-text-tertiary)
+    color: var(--color-text-secondary)
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
     opacity: 1
 
@@ -107,14 +122,16 @@ label sup,
     text-decoration: underline
 
 .form-group
-  align-items: center
-  display: flex
-  justify-content: end
   position: relative
 
   .form-group-addon
     position: absolute
     right: var(--spacer-2)
+    top: var(--spacer-2)
+
+  &:has([type="checkbox"]),
+  &:has([type="radio"])
+    justify-content: start
 
 .toggle-bar
   border: var(--border-width) solid var(--border-color)
@@ -177,3 +194,150 @@ label sup,
         left: .2rem
         height: 1.2rem
         width: 1.2rem
+select
+  &.form-control
+    &:hover
+      cursor: pointer
+
+// Checkboxes and radios Bootstrap overrides
+// TODO: remove overrides when cleaning up Bootstrap deprecated partials
+.form-check,
+.form-check-input
+  position: static
+
+.form-check
+  line-height: var(--lh-sm)
+  +padding(0, left)
+
+.form-check-input
+  +margin(0, left)
+  +margin(1, right)
+  +margin(0, top)
+
+.form-check-label
+  +fw-normal
+
+  &:hover
+    cursor: pointer
+
+[type="checkbox"],
+[type="radio"]
+  height: var(--spacer)
+  min-height: 0
+  width: auto
+
+[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
+    transition: background-color var(--transition-speed)
+    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
+
+.form-check-custom-radio
+  .form-check-custom-mark
+    border-radius: 50%
+
+    &:after
+      background: white
+      border: 0
+      border-radius: 50%
+      height: var(--spacer-2)
+      left: .6rem
+      top: .6rem
+      width: var(--spacer-2)
+
+.slider-custom
+  background: var(--color-text-tertiary)
+  border: var(--border-width) solid var(--border-color)
+  border-radius: 1.2rem
+  height: var(--spacer-4)
+  min-height: 0
+  outline: none
+  +padding(1, x)
+  transition: opacity var(--transition-speed-slow)
+  -webkit-appearance: none
+  -webkit-transition: var(--transition-speed-slow)
+  width: 100%
+
+  &:active,
+  &:focus
+    background-color: var(--color-text-tertiary)
+
+  &:hover
+    background-color: var(--color-text-secondary)
+
+  &::-moz-range-thumb
+    background: white
+    border-radius: 50%
+    cursor: pointer
+    height: var(--spacer)
+    width: var(--spacer)
+
+  &::-webkit-slider-thumb
+    appearance: none
+    background: white
+    border-radius: 50%
+    cursor: pointer
+    height: var(--spacer)
+    -webkit-appearance: none
+    width: var(--spacer)
+
+.slider-custom-steps
+  display: flex
+  justify-content: space-between
+  padding-left: 1.6rem
+  padding-right: 1.2rem
+
+.slider-custom-steps-item
+  background-color: var(--color-text-tertiary)
+  height: var(--spacer-1)
+  transform: translateX(-.1rem)
+  width: .2rem
+
+.slider-custom-steps-item-dots
+  border-radius: 50%
+  width: var(--spacer-1)
diff --git a/src/styles/_variables.sass b/src/styles/_variables.sass
index 0b31872..243a99e 100644
--- a/src/styles/_variables.sass
+++ b/src/styles/_variables.sass
@@ -287,9 +287,11 @@ html[data-theme="dark"]
 /* Config. */
 $font-path: '../assets/fonts' !default
 
+// TODO: change and simplify Sass variables to CSS custom properties
 $input-box-shadow: none
 $input-border-color: rgba(black, .1)
 $input-border-width: .2rem
+$input-transition: background-color var(--transition-speed-slow) var(--transition-timing-fast), border-color var(--transition-speed-slow) var(--transition-timing-fast), box-shadow var(--transition-speed-slow) var(--transition-timing-fast)
 
 $label-margin-bottom: .2rem