Radio Buttons

Radio buttons allow users to select a single option from a set of options.

Default Example


When to Use

  • Use radio buttons when only one option may be selected and the set of options need to be visible on the page.

When Not to Use

  • Do not use radio buttons for longer sets of options. Use a select instead. When only two options are available, consider using a toggle.

Variations

Usage

Separate radios should not be arranged next to each other, instead should always be vertical.

Variations

Default with Error Message

UH OH! You must choose one.


Developer Notes

Default

<fieldset class="row">
  <label class="col-xs-12 spark-radio">
  	<input class="spark-radio__input" type="radio" name="test-radio"> <!-- This has to be before .spark-radio__box! -->
  	<span class="spark-radio__box"></span>
  	<span class="spark-label">Radio one...</span>
  </label>
  <label class="col-xs-12 spark-radio">
  	<input class="spark-radio__input" type="radio" name="test-radio"> <!-- This has to be before .spark-radio__box! -->
  	<span class="spark-radio__box"></span>
  	<span class="spark-label">Radio two...</span>
  </label>
  <label class="col-xs-12 spark-radio">
  	<input class="spark-radio__input" type="radio" name="test-radio" disabled> <!-- This has to be before .spark-radio__box! -->
  	<span class="spark-radio__box"></span>
  	<span class="spark-label">Radio three...</span>
  </label>
</fieldset>

Default with Error Message

UH OH! You must choose one. 
<fieldset class="row spark-radio-group" data-error>
  <div class="col-xs-12">
    <span class="spark-radio-group__message"><b>UH OH!</b> You must choose one.</span>
  </div>
  <label class="col-xs-12 spark-radio">
    <input class="spark-radio__input" type="radio" name="test-radio-2"> <!-- This has to be before .spark-radio__box! -->
    <span class="spark-radio__box"></span>
    <span class="spark-label">Radio one...</span>
  </label>
  <label class="col-xs-12 spark-radio">
    <input class="spark-radio__input" type="radio" name="test-radio-2"> <!-- This has to be before .spark-radio__box! -->
    <span class="spark-radio__box"></span>
    <span class="spark-label">Radio two...</span>
  </label>
  <label class="col-xs-12 spark-radio">
    <input class="spark-radio__input" type="radio" name="test-radio-2"> <!-- This has to be before .spark-radio__box! -->
    <span class="spark-radio__box"></span>
    <span class="spark-label">Radio three...</span>
  </label>
</fieldset>

Order Matters: The <input> element must be the first item inside of the radio container. Otherwise the disabled state will not work properly.