Checkboxes

Checkboxes come with custom style and provide easily customizable and extend variant

Examples

We do Checkboxes completely custom so we have full control and don't conflict with Bootstrap custom Checkboxes. 

<label class="ec-checkbox">
  <input type="checkbox" name="checkbox">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Check Me</span>
</label>

Sizing

Set heights and width using classes like .check-xs, .check-sm, .check-lg, .check-xl

<label class="ec-checkbox check-xs mb-3 mr-4">
  <input type="checkbox" name="checkbox">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Check me</span>
</label>

<label class="ec-checkbox check-sm mb-3 mr-4">
  <input type="checkbox" name="checkbox">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Check me</span>
</label>

<label class="ec-checkbox mb-3 mr-4">
  <input type="checkbox" name="checkbox">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Check me</span>
</label>

<label class="ec-checkbox check-lg mb-3 mr-4">
  <input type="checkbox" name="checkbox">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Check me</span>
</label>

<label class="ec-checkbox check-xl mb-3 mr-4">
  <input type="checkbox" name="checkbox">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Check me</span>
</label>

Color Variants

Checkboxes come with Bootstrap color variants. add class .check-success, .check-info, .check-warning, .check-danger, 

<label class="ec-checkbox mr-4">
  <input type="checkbox" name="checkbox" checked="checked">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Default</span>
</label>

<label class="ec-checkbox check-success mr-4">
  <input type="checkbox" name="checkbox" checked="checked">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Success</span>
</label>

<label class="ec-checkbox check-info mr-4">
  <input type="checkbox" name="checkbox" checked="checked">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Info</span>
</label>

<label class="ec-checkbox check-warning mr-4">
  <input type="checkbox" name="checkbox" checked="checked">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Warning</span>
</label>

<label class="ec-checkbox check-danger">
  <input type="checkbox" name="checkbox" checked="checked">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Danger</span>
</label>

Checkbox outline and rounded

By adding class .check-outline and .check-rounded you will get outline and radio type varient 

<label class="ec-checkbox check-outline mr-4">
  <input type="checkbox" name="checkbox">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Uncheck</span>
</label>

<label class="ec-checkbox check-outline mr-4">
  <input type="checkbox" name="checkbox" checked="checked">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Checked</span>
</label>

<label class="ec-checkbox check-rounded mr-4">
  <input type="checkbox" name="checkbox">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Uncheck</span>
</label>

<label class="ec-checkbox check-rounded mr-4">
  <input type="checkbox" name="checkbox" checked="checked">
  <span class="ec-checkbox__control"></span>
  <span class="ec-checkbox__lebel">Checked</span>
</label>