Toggle / Switch

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

<form class="themeguide-checkbox-form" data-drupal-selector="themeguide-checkbox-form" action="/ar/themeguide/forms/toggle" method="post" id="themeguide-checkbox-form" accept-charset="UTF-8">
  <div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-default form-item-checkbox-default form-no-description mb-050 mt-050">
        <input data-drupal-selector="edit-checkbox-default" type="checkbox" id="edit-checkbox-default" name="checkbox_default" value="1" class="form-checkbox form-check-input" />

        <label class="form-check-label option form-label" for="edit-checkbox-default">Checkbox Default</label>
          </div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-selected form-item-checkbox-selected form-no-description mb-050 mt-050">
        <input data-drupal-selector="edit-checkbox-selected" type="checkbox" id="edit-checkbox-selected" name="checkbox_selected" value="1" checked="checked" class="form-checkbox form-check-input" />

        <label class="form-check-label option form-label" for="edit-checkbox-selected">Checkbox Selected</label>
          </div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-disabled form-item-checkbox-disabled form-no-description form-disabled mb-050 mt-050">
        <input data-drupal-selector="edit-checkbox-disabled" disabled="disabled" type="checkbox" id="edit-checkbox-disabled" name="checkbox_disabled" value="1" class="form-checkbox form-check-input" />

        <label class="form-check-label option form-label" for="edit-checkbox-disabled">Checkbox Disabled</label>
          </div>
<div class="form-group form-check js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-checkbox-description form-item-checkbox-description mb-050 mt-050">
        <input data-drupal-selector="edit-checkbox-description" aria-describedby="edit-checkbox-description--description" type="checkbox" id="edit-checkbox-description" name="checkbox_description" value="1" class="form-checkbox form-check-input" />

        <label class="form-check-label option form-label" for="edit-checkbox-description">Checkbox with description</label>
              <small id="edit-checkbox-description--description" class="form-text text-muted description ml-0 d-block">
        This is a description for this field
      </small>
      </div>
<input autocomplete="off" data-drupal-selector="form-znuz7tkvgvbjdblijc3rmsfvsjedybhfgodam4iozvw" type="hidden" name="form_build_id" value="form-znuZ7TkvgvbJdblijc3rmsFVSJEdYBhfGODAm4Iozvw" />
<input data-drupal-selector="edit-themeguide-checkbox-form" type="hidden" name="form_id" value="themeguide_checkbox_form" />
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Submit" class="button button--primary js-form-submit form-submit btn btn-primary" />
</div>

</form>