Radio

Custom styled radio buttons and fieldset with error.

Radio Set

What is your favourite color?
<fieldset>

  <legend>What is your favourite color?</legend>

  <div class="radio">
  <input type="radio" name="color" id="orange" value="orange" />
  <label for="orange">Orange</label>
  </div>

  <div class="radio">
  <input type="radio" name="color" id="green" value="green" />
  <label for="green">Green</label>
  </div>

  <div class="radio">
  <input type="radio" name="color" id="blue" value="blue" />
  <label for="blue">Blue</label>
  </div>

</fieldset>

Radio Set with error

What is your favourite color?
Please select an option
<fieldset class="error">

  <legend>What is your favourite color?</legend>

  <div class="radio">
  <input type="radio" name="color" id="yellow" value="yellow" />
  <label for="yellow">Yelow</label>
  </div>

  <div class="radio">
  <input type="radio" name="color" id="purple" value="purple" />
  <label for="purple">Purple</label>
 </div>

  <div class="radio">
  <input type="radio" name="color" id="black" value="black" />
  <label for="black">Black</label>
  </div>

  <div class="error-message">Please select an option</div>

</fieldset>

Radio Validation

// fieldset: fieldset containing the radios
isRadioValid(fieldset, min)