argon design checkbox
<div class="custom-control custom-checkbox mb-3">
<input class="custom-control-input" id="customCheck1" type="checkbox">
<label class="custom-control-label" for="customCheck1">Unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input class="custom-control-input" id="customCheck2" type="checkbox" checked>
<label class="custom-control-label" for="customCheck2">Checked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input class="custom-control-input" id="customCheck3" type="checkbox" disabled>
<label class="custom-control-label" for="customCheck3">Disabled Unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input class="custom-control-input" id="customCheck4" type="checkbox" checked disabled>
<label class="custom-control-label" for="customCheck4">Disabled Checked</label>
</div>