Skip Navigation

Radio Buttons

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

Available in React

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.

Examples

Usage

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

Examples

Default with Error Message

UH OH! You must choose one.


Developer Notes

Order Matters

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

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>

<style type="text/css">
  
</style>

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>

<style type="text/css">
  
</style>

Right-to-Left Support

<fieldset class="row" dir="rtl">
  <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">רדיו אחד</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">רדיו שני</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">רדיו שלוש</span>
  </label>
</fieldset>

<style type="text/css">
  
</style>