Best way to do placeholders (skeletons) for checkbox input with label

[cavasinf]

Hey all, just wondering.
Has anyone ever made a placeholder to simulates check-boxes ?

I tried to use avatar-xs class and col-1 to replicate the checkbox but I'm not happy with the result.

<div class="card">
   <div class="card-body">
      <!-- Test 1 -->
      <div class="row align-items-center mb-2">
         <div class="placeholder col-1 p-0"></div>
         <div class="placeholder col mx-3"></div>
      </div>

      <!-- Test 2 -->
      <div class="row align-items-center mb-2">
         <div class="avatar avatar-xs placeholder col-auto"></div>
         <div class="placeholder col mx-3"></div>
      </div>

      <!-- How it should looks like -->
      <div class="form-check">
         <input type="checkbox" class="form-check-input">
         <label class="form-check-label">Example checkbox</label>
      </div>
   </div>
</div>

[dheineman]

You can combine placeholder classes with other bootstap/tabler elements & classes. so using your example and adding placeholder classes like this.

<div class="card">
   <div class="card-body">
      <!-- Test 1 -->
      <div class="row align-items-center mb-2">
         <div class="placeholder col-1 p-0"></div>
         <div class="placeholder col mx-3"></div>
      </div>

      <!-- Test 2 -->
      <div class="row align-items-center mb-2">
         <div class="avatar avatar-xs placeholder col-auto"></div>
         <div class="placeholder col mx-3"></div>
      </div>

      <!-- How it should looks like -->
      <div class="form-check">
         <input type="checkbox" class="form-check-input">
         <label class="form-check-label">Example checkbox</label>
      </div>

      <!-- form checkbox with placeholders -->
      <div class="form-check">
         <div class="form-check-input placeholder"></div>
         <div class="form-check-label placeholder">&nbsp;</div>
      </div>
   </div>
</div>

Should produce a placeholder that looks like the real elements

note: i am not using the input or label element as it would still make the placeholder checkable and the   makes sure the label height is the same as the actual text.

[cavasinf]

Thank you!
Works like a charm.

[cavasinf]

It would be a good idea to make an placeholder example with form inputs in https://preview.tabler.io/placeholder.html
Like Basic form and Horizontal form : https://preview.tabler.io/form-elements.html