Radios

Radios 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-radio">
  <input type="radio" name="radio2">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Radio</span>
</label>

Sizing

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

<label class="ec-radio radio-xs mr-3">
  <input type="radio" name="radio2">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Radio</span>
</label>
<label class="ec-radio radio-sm mr-3">
  <input type="radio" name="radio2">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Radio</span>
</label>
<label class="ec-radio mr-3">
  <input type="radio" name="radio2">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Radio</span>
</label>
<label class="ec-radio radio-lg mr-3">
  <input type="radio" name="radio2">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Radio</span>
</label>
<label class="ec-radio radio-xl mr-3">
  <input type="radio" name="radio2" checked="">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Radio</span>
</label>

Color Variants

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

<label class="ec-radio mr-3">
  <input type="radio" name="radio3" checked="checked">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Default</span>
</label>
<label class="ec-radio radio-success mr-3">
  <input type="radio" name="radio3" checked="checked">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Success</span>
</label>
<label class="ec-radio radio-info mr-3">
  <input type="radio" name="radio3">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Info</span>
</label>
<label class="ec-radio radio-warning mr-3">
  <input type="radio" name="radio3">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Warning</span>
</label>
<label class="ec-radio radio-danger mr-3">
  <input type="radio" name="radio3">
  <span class="ec-radio__control"></span>
  <span class="ec-radio__label">Danger</span>
</label>