FNC Design Systems

Copy

  
   <div class="row">
   <div class="col-lg-6">
      <div class="card">
      <div class="card-body">
   <h5 class="card-title">Checkbox</h5>
                                                                                  

   <div class="col-sm-10">
   <div class="form-check">
     <input class="form-check-input" type="checkbox" id="gridCheck1" checked="">
   </div>
 </div>
 <div class="col-sm-10">
   <div class="form-check">
     <input class="form-check-input br" type="checkbox" id="gridCheck1">
   </div>
 </div>
 <div class="col-sm-10">
   <div class="form-check">
     <input class="form-check-input br" type="checkbox" id="gridCheck1" disabled="">
   </div>
 </div>
 <div class="col-sm-10">
   <div class="form-check">
     <input class="form-check-input" type="checkbox" id="gridCheck1" checked="" disabled="">
   </div>
 </div>
 <div class="col-sm-10">
 <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
 </div>
 </div>

</div>
</div>
</div>

<div class="col-lg-6">
<div class="card">
<div class="card-body checkbox-min-height">
<h5 class="card-title">Checkbox With Label</h5>



<div class="col-sm-10">
<div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked="">
   <label class="form-check-label" for="flexCheckDefault">
     Option 
   </label>
 </div>
</div>

<div class="col-sm-10">
<div class="form-check">
 <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminates">
 <label class="form-check-label" for="flexCheckDefault">
   Option 
 </label>
</div>
</div>

<div class="col-sm-10">
<div class="form-check">
   <input class="form-check-input br" type="checkbox" value="" id="flexCheckDefault">
   <label class="form-check-label" for="flexCheckDefault">
     Option 
   </label>
 </div>
</div>






</div>
</div>
</div>



<div class="col-lg-6">
<div class="card">
<div class="card-body checkbox-hrz-min-height">
<h5 class="card-title">Checkbox Horizontal</h5>



<div class="form-check form-check-inline">
<input class="form-check-input br" type="checkbox" id="inlineCheckbox1" value="option1" checked="">
<label class="form-check-label" for="inlineCheckbox1">Option</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input br" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Option</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input br" type="checkbox" id="inlineCheckbox3" value="option3" disabled="">
<label class="form-check-label" for="inlineCheckbox3">Option </label>
</div>





</div>
</div>
</div>



<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Checkbox Verticalizontal</h5>


<div class="form-check">
<input class="form-check-input br" type="checkbox" value="" id="defaultCheck1" checked="">
<label class="form-check-label" for="defaultCheck1">
Option
</label>
</div>
<div class="form-check">
<input class="form-check-input br" type="checkbox" value="" id="defaultCheck2" disabled="">
<label class="form-check-label" for="defaultCheck2">
Option
</label>
</div>

<div class="form-check">
<input class="form-check-input br" type="checkbox" value="" id="defaultCheck2" checked="">
<label class="form-check-label" for="defaultCheck2">
Option
</label>
</div>



</div>
</div>
</div>


</div>

Copy

  
   
         .form-check {
         display: block;
         min-height: 1.5rem;
         padding-left: 1.5em;
         margin-bottom: 0.125rem;
     }
     
     
     
     .form-check-input:checked[type=checkbox] {
         background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e);
     }
     .form-check-input:checked {
         background-color: #167DF5;
         border-color: #167DF5;
     }
     
     .form-check-input:checked {
         background-color: #0d6efd;
         border-color: #0d6efd;
     }
     
     .form-check-input[type=checkbox] {
         border-radius: 0.25em;
     }
     .form-check .form-check-input {
         float: left;
         margin-left: -1.5em;
     }
     .form-check-input {
         width: 1em;
         height: 1em;
         margin-top: 0.25em;
         vertical-align: top;
         background-color: #fff;
         background-repeat: no-repeat;
         background-position: center;
         background-size: contain;
         border: 1px solid rgba(0,0,0,.25);
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         -webkit-print-color-adjust: exact;
         color-adjust: exact;
         print-color-adjust: exact;
     }
     
     .form-check-input[type=checkbox]:indeterminate {
         background-color: #167DF5;
         border-color: #167DF5;
     }
     .form-check-input[type=checkbox]:indeterminate {
         background-color: #0d6efd;
         border-color: #0d6efd;
         background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e);
     }