form-elements-2.html

<div class="mb-2">
   <label class="form-label">Password</label>
   <input type="password" class="form-control" name="example-password-input" placeholder="Password..">
</div>

<div class="mb-2">
   <label class="form-label">Valid State</label>
   <input type="text" class="form-control is-valid" name="example-text-input-valid"
          placeholder="Valid State..">

   <input type="text" class="form-control mt-3 state-valid" value="Valid state">
</div>

<div class="mb-2">
   <label class="form-label">Invalid State</label>
   <input type="text" class="form-control is-invalid" name="example-text-input-invalid"
          placeholder="Invalid State..">
   <div class="invalid-feedback">Invalid feedback</div>

   <input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
</div>

<div class="mb-2">
   <label class="form-label">Country</label>
   <select class="form-control custom-select">
      <option value="">Germany</option>
   </select>
</div>
<div class="mb-2">
   <label class="form-label">Ratios</label>
   <input type="range" class="custom-range" step="5" min="0" max="50">
</div>
<div class="mb-2">
   <label class="form-label">Size</label>
   {% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
</div>
<div class="mb-2">
   <label class="form-label">Shipping methods</label>
   {% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
</div>
<div class="mb-2">
   <label class="form-label">Icons input</label>
   {% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
</div>

<div class="mb-2">
   <label class="form-label">Icon input</label>
   {% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
</div>

<div class="mb-2">
   <label class="form-label">Your skills</label>
   {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
</div>

{% include parts/input-toggle.html %}

<div class="mb-2">
   <div class="form-label">Toggle switch single</div>
   <label class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input">
      <div class="custom-control-label">I agree with terms and conditions</div>
   </label>
</div>

<div class="mb-2">
   <div class="form-label">Radios</div>
   <div class="custom-controls-stacked">
      <label class="custom-control custom-radio">
         <input type="radio" class="custom-control-input" name="example-radios" value="option1"
                checked>
         <div class="custom-control-label">Option 1</div>
      </label>
      <label class="custom-control custom-radio">
         <input type="radio" class="custom-control-input" name="example-radios" value="option2">
         <div class="custom-control-label">Option 2</div>
      </label>
      <label class="custom-control custom-radio">
         <input type="radio" class="custom-control-input" name="example-radios" value="option3"
                disabled>
         <div class="custom-control-label">Option Disabled</div>
      </label>
      <label class="custom-control custom-radio">
         <input type="radio" class="custom-control-input" name="example-radios2" value="option4"
                disabled checked>
         <div class="custom-control-label">Option Disabled Checked</div>
      </label>
   </div>
</div>