Radioknappar med endast HTML och CSS

<fieldset class="c-fieldset--medium">
  <legend>Välj din favoritfärg</legend>
  <div class="c-radio-btn--medium">
    <input checked="checked" id="radio1" name="radio_group1" type="radio" value="Ingen">
    <label for="radio1">Ingen</label>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radio2" name="radio_group1" type="radio" value="Blå">
    <label for="radio2">Blå</label>
  </div>

  <div class="c-radio-btn--medium">
    <input id="radio3" name="radio_group1" type="radio" value="Gul">
    <label for="radio3">Gul</label>
  </div>

  <div class="c-radio-btn--medium">
    <input id="radio4" name="radio_group1" type="radio" value="Röd">
    <label for="radio4">Röd</label>
  </div>
</fieldset>

<fieldset class="c-fieldset--medium">
  <legend>
    Välj din favoritfärg
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <span class="label__description">
      Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
      ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.
    </span>
  </legend>
  <div class="c-radio-btn--medium">
    <input checked="checked" id="radio_beskrivning1" name="välj din favoritfärg" required="" type="radio" value="Ingen">
    <label for="radio_beskrivning1">Ingen</label>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radio_beskrivning2" name="välj din favoritfärg" type="radio" value="Blå">
    <label for="radio_beskrivning2">Blå</label>
  </div>

  <div class="c-radio-btn--medium">
    <input id="radio_beskrivning3" name="välj din favoritfärg" type="radio" value="Gul">
    <label for="radio_beskrivning3">Gul</label>
  </div>

  <div class="c-radio-btn--medium">
    <input id="radio_beskrivning4" name="välj din favoritfärg" type="radio" value="Röd">
    <label for="radio_beskrivning4">Röd</label>
  </div>
</fieldset>

<fieldset class="c-fieldset--medium c-fieldset--error">
  <legend>
    Välj din favoritfärg
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <span class="error"><span class="sjv-i-fel"></span>Välj en favoritfärg.</span>
  </legend>
  <div class="c-radio-btn--medium">
    <input id="radio_fel2" name="välj din favoritfärg med fel" type="radio" value="Blå">
    <label for="radio_fel2">Blå</label>
  </div>

  <div class="c-radio-btn--medium">
    <input id="radio_fel3" name="välj din favoritfärg med fel" type="radio" value="Gul">
    <label for="radio_fel3">Gul</label>
  </div>

  <div class="c-radio-btn--medium">
    <input id="radio_fel4" name="välj din favoritfärg med fel" type="radio" value="Röd">
    <label for="radio_fel4">Röd</label>
  </div>
</fieldset>

<fieldset class="c-fieldset--medium c-fieldset--disabled" disabled="">
  <legend>Välj din favoritfärg</legend>
  <div class="c-radio-btn--medium c-radio-btn--disabled">
    <input checked="checked" id="radio1_disabled" name="radiogroup_disabled" type="radio" value="Ingen">
    <label for="radio1_disabled">Ingen</label>
  </div>

  <div class="c-radio-btn--medium c-radio-btn--disabled">
    <input id="radio2_disabled" name="radiogroup_disabled" type="radio" value="Blå">
    <label for="radio2_disabled">Blå</label>
  </div>

  <div class="c-radio-btn--medium c-radio-btn--disabled">
    <input id="radio3_disabled" name="radiogroup_disabled" type="radio" value="Gul">
    <label for="radio3_disabled">Gul</label>
  </div>

  <div class="c-radio-btn--medium c-radio-btn--disabled">
    <input id="radio4_disabled" name="radiogroup_disabled" type="radio" value="Röd">
    <label for="radio4_disabled">Röd</label>
  </div>
</fieldset>

<fieldset class="c-fieldset--small">
  <legend>Välj din favoritfärg</legend>
  <div class="c-radio-btn--small">
    <input checked="checked" id="radiotiny_1" name="radiogroup_tiny" type="radio" value="Ingen">
    <label for="radiotiny_1">Ingen</label>
  </div>

  <div class="c-radio-btn--small">
    <input id="radiotiny_2" name="radiogroup_tiny" type="radio" value="Blå">
    <label for="radiotiny_2">Blå</label>
  </div>

  <div class="c-radio-btn--small">
    <input id="radiotiny_3" name="radiogroup_tiny" type="radio" value="Gul">
    <label for="radiotiny_3">Gul</label>
  </div>

  <div class="c-radio-btn--small">
    <input id="radiotiny_4" name="radiogroup_tiny" type="radio" value="Röd">
    <label for="radiotiny_4">Röd</label>
  </div>
</fieldset>

<fieldset class="c-fieldset--small">
  <legend>
    Välj din favoritfärg
    <span class="label__description">
      Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
      ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.
    </span>
  </legend>
  <div class="c-radio-btn--small">
    <input checked="checked" id="radiotiny_valfritt_1" name="radiotiny_valfritt" type="radio" value="test_valfritt">
    <label for="radiotiny_valfritt_1">Ingen</label>
  </div>

  <div class="c-radio-btn--small">
    <input id="radiotiny_valfritt_2" name="radiotiny_valfritt" type="radio" value="test_valfritt">
    <label for="radiotiny_valfritt_2">Blå</label>
  </div>

  <div class="c-radio-btn--small">
    <input id="radiotiny_valfritt_3" name="radiotiny_valfritt" type="radio" value="test_valfritt">
    <label for="radiotiny_valfritt_3">Gul</label>
  </div>

  <div class="c-radio-btn--small">
    <input id="radiotiny_valfritt_4" name="radiotiny_valfritt" type="radio" value="test_valfritt">
    <label for="radiotiny_valfritt_4">Röd</label>
  </div>
</fieldset>

<fieldset class="c-fieldset--medium" style="max-width: 400px">
  <legend>Välj din favoritfärg</legend>
  <div class="c-radio-btn--medium">
    <input checked="checked" id="radio1_radbrytning" name="radio_radbrytning" type="radio" value="Ingen">
    <label for="radio1_radbrytning">Ingen</label>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radio2_radbrytning" name="radio_radbrytning" type="radio" value="Blå">
    <label for="radio2_radbrytning">Blå</label>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radio3_radbrytning" name="radio_radbrytning" type="radio" value="Gul">
    <label for="radio3_radbrytning">
      Långt val som tar mycket plats för att testa radbrytning i checkbox
    </label>
  </div>
</fieldset>