Form controls

<div class="row">
    <div class="col-md-6">
      <div class="input-group">
        <div class="input-group-prepend">
          <button class="btn btn-raised-primary btn-icon">
            <i class="material-icons">home</i>
          </button>
          
        </div>
        <input type="text" class="form-control" id="" placeholder="Username" aria-describedby="" >
        <div class="input-group-append">
          <button class="btn btn-raised-primary btn-icon">
            <i class="material-icons">home</i>
          </button>
        </div>
      </div>
      <div class="input-group  input-light mb-3">
        <input type="text" class="form-control" placeholder="Username" value="No icon" aria-label="Username" aria-describedby="basic-addon1">
      </div>
      <div class="input-group with-icon input-light mb-3">
        <div class="input-group-prepend">
          <i class="input-group-text fas fa-user"></i>
        </div>
        <input type="text" class="form-control" placeholder="Username" value="With icon" aria-label="Username" aria-describedby="basic-addon1">
      </div>
      <div class="input-group with-icon input-light">
        <div class="input-group-prepend">
          <i class="input-group-text far fa-keyboard"></i>
        </div>
      <textarea class="form-control" aria-label="With textarea">Textarea</textarea>
      </div>
  </div>
    <!-- End Default controls -->
    

Custom Inputs

<div class="custom-input-1 light">
  <i class="material-icons">search</i>
  <input type="text" class="" id="" placeholder="Username" aria-describedby="" >
</div>

Form control states

<div class="row">
  <div class="col-md-6">
    <div class="input-group  with-icon has-success input-light mb-3">
      <div class="input-group-prepend">
        <i class="input-group-text far fa-file-alt"></i>
      </div>
      <input value="Success" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-group with-icon has-error input-light mb-3">
      <div class="input-group-prepend">
          <i class="input-group-text far fa-file-alt"></i>
      </div>
      <input value="Error" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-group with-icon has-warning input-light mb-3">
      <div class="input-group-prepend">
        <i class="input-group-text far fa-file-alt"></i>
      </div>
      <input value="Warning" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </div>
</div>

Checkboxes

<div class="mb-md custom-control custom-checkbox checkbox-primary mb-md">
  <input type="checkbox" class="custom-control-input" id="customCheck2" checked="">
  <label class="custom-control-label" for="customCheck2">
    Primary
  </label>
</div>
 
<div class="mb-md custom-control custom-checkbox checkbox-secondary">
  <input type="checkbox" class="custom-control-input" id="customCheck3" checked="">
  <label class="custom-control-label" for="customCheck3">
    Secondary
  </label>
</div>

<div class="mb-md custom-control custom-checkbox checkbox-success">
  <input type="checkbox" class="custom-control-input" id="customCheck4" checked="">
  <label class="custom-control-label" for="customCheck4">
    Success
  </label>
</div>

<div class="mb-md custom-control custom-checkbox checkbox-danger">
  <input type="checkbox" class="custom-control-input" id="customCheck5" checked="">
  <label class="custom-control-label" for="customCheck5">
    Danger
  </label>
</div>

<div class="mb-md custom-control custom-checkbox checkbox-info">
  <input type="checkbox" class="custom-control-input" id="customCheck6" checked="">
  <label class="custom-control-label" for="customCheck6">
    Info
  </label>
</div>
<div class="mb-md custom-control custom-checkbox checkbox-light">
  <input type="checkbox" class="custom-control-input" id="customCheck7" checked="">
  <label class="custom-control-label" for="customCheck7">
    Light
  </label>
</div>
<div class="mb-md custom-control custom-checkbox checkbox-dark">
<input type="checkbox" class="custom-control-input" id="customCheck8" checked="">
<label class="custom-control-label" for="customCheck8">
Dark
</label>
</div>
<div class="mb-md custom-control custom-checkbox checkbox-dark">
<input type="checkbox" class="custom-control-input" id="customCheck9" disabled="" checked="">
<label class="custom-control-label" for="customCheck9">
Disabled
</label>
</div>

Radio

<div class="custom-control custom-radio radio-primary mb-md">
    <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input" checked="">
    <label class="custom-control-label" for="customRadioInline1">
    Primary
    </label>
    </div>
    <div class="custom-control custom-radio radio-secondary mb-md">
    <input type="radio" id="customRadioInline3" name="customRadioInline" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline3">
    Secondary
    </label>
    </div>
    <div class="custom-control custom-radio radio-success mb-md">
    <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline2">
    Success
    </label>
    </div>
    <div class="custom-control custom-radio radio-warning mb-md">
    <input type="radio" id="customRadioInline4" name="customRadioInline" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline4">
    Warning
    </label>
    </div>
    <div class="custom-control custom-radio radio-danger mb-md">
    <input type="radio" id="customRadioInline5" name="customRadioInline" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline5">
    Danger
    </label>
    </div>
    <div class="custom-control custom-radio radio-info mb-md">
    <input type="radio" id="customRadioInline6" name="customRadioInline" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline6">
    Info
    </label>
    </div>
    <div class="custom-control custom-radio radio-light mb-md">
    <input type="radio" id="customRadioInline7" name="customRadioInline" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline7">
    Light
    </label>
    </div>
    <div class="custom-control custom-radio radio-dark mb-md">
    <input type="radio" id="customRadioInline8" name="customRadioInline" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline8">
    Dark
    </label>
    </div>
    <div class="custom-control custom-radio radio-dark mb-md">
    <input type="radio" id="customRadioInline9" name="customRadioInline" class="custom-control-input" disabled="">
    <label class="custom-control-label" for="customRadioInline9">
    Disabled
    </label>
    </div>

Switch

<label class="switch switch-primary my-md">
    <span>Primary</span>
    <input type="checkbox" checked="">
    <span class="slider"></span>
    </label>
    <br>
    <label class="switch switch-secondary my-md">
    <span>Secondary</span>
    <input type="checkbox" checked="">
    <span class="slider"></span>
    </label>
    <br>
    <label class="switch switch-success my-md">
    <span>Success</span>
    <input type="checkbox" checked="">
    <span class="slider"></span>
    </label>
    <br>
    <label class="switch switch-warning my-md">
    <span>Warning</span>
    <input type="checkbox" checked="">
    <span class="slider"></span>
    </label>
    <br>
    <label class="switch switch-danger my-md">
    <span>Danger</span>
    <input type="checkbox" checked="">
    <span class="slider"></span>
    </label>
    <br>
    <label class="switch switch-light my-md">
    <span>Light</span>
    <input type="checkbox" checked="">
    <span class="slider"></span>
    </label>
    <br>
    <label class="switch switch-dark my-md">
    <span>Dark</span>
    <input type="checkbox" checked="">
    <span class="slider"></span>
    </label>
    <br>
    <label class="switch switch-dark my-md">
    <span>Disabled</span>
    <input type="checkbox" disabled="">
    <span class="slider"></span>
    </label>