Components

Radio Button

Radio buttons are used to select one option from a set of options.

Example:

Radio Button is a simple way to select one option from a set of options.


<label class="radiobtn">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="radiobtn">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

Radio Button Types :





<div>
  <label class="radiobtn">One
    <input type="radio" checked="checked" name="radio">
    <span class="checkmark"></span>
  </label>
  <label class="radiobtn">Two
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
  <label class="radiobtn">Three
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
</div>
<div class="success">
  <label class="radiobtn">One
    <input type="radio" checked="checked" name="radio">
    <span class="checkmark"></span>
  </label>
  <label class="radiobtn">Two
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
  <label class="radiobtn">Three
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
</div>
<div class="danger">
  <label class="radiobtn">One
    <input type="radio" checked="checked" name="radio">
    <span class="checkmark"></span>
  </label>
  <label class="radiobtn">Two
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
  <label class="radiobtn">Three
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
</div>
<div class="info">
  <label class="radiobtn">One
    <input type="radio" checked="checked" name="radio">
    <span class="checkmark"></span>
  </label>
  <label class="radiobtn">Two
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
  <label class="radiobtn">Three
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
</div>