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">
  <legend>Välj din favoritfärg</legend>
  <div class="c-radio-btn--medium">
    <input checked="checked" id="radioinput_1" name="radio-inputtext" type="radio" value="Ingen">
    <label for="radioinput_1">Ingen</label>
  </div>
  <div class="input-child-component" data-radiobutton-id="radioinput_1" rel="c-radioChildWraper-js">
    <div class="c-input--small">
      <label for="input-text-1">Förnamn</label>
      <div class="c-input__wrapper">
        <input autocomplete="given-name" id="input-text-1" name="text1" type="text">
        <div class="icon"></div>
      </div>
    </div>
  </div>
  <div class="input-child-component" data-radiobutton-id="radioinput_1" rel="c-radioChildWraper-js">
    <div class="c-input--small">
      <label for="input-text-2">Efternamn</label>
      <div class="c-input__wrapper">
        <input autocomplete="family-name" id="input-text-2" name="text1" type="text">
        <div class="icon"></div>
      </div>
    </div>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radioinput_2" name="radio-inputtext" type="radio" value="Blå">
    <label for="radioinput_2">Blå</label>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radioinput_3" name="radio-inputtext" type="radio" value="Gul">
    <label for="radioinput_3">Gul</label>
  </div>
  <div class="input-child-component" data-radiobutton-id="radioinput_3" rel="c-radioChildWraper-js">
    <fieldset class="c-fieldset--medium">
      <legend>Välj nyans</legend>
      <div class="c-checkbox--medium">
        <input class="c-checkbox__input" id="checkbox_1x" name="checkbox" type="checkbox">
        <label for="checkbox_1x">
          <span class="c-checkbox__checkbox">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" focusable="false" width="0.4375em" height="0.4375em" viewBox="0 0 78.369 78.369">
              <g>
                <path d="M78.049,19.015L29.458,67.606c-0.428,0.428-1.121,
                        0.428-1.548,0L0.32,40.015c-0.427-0.426-0.427-1.119,
                        0-1.547l6.704-6.704c0.428-0.427,1.121-0.427,
                        1.548,0l20.113,20.112l41.113-41.113c0.429-0.427,1.12-0.427,
                        1.548,0l6.703,6.704C78.477,17.894,78.477,18.586,78.049,19.015z"></path>
              </g>
            </svg>
          </span>
          <span>Solgul</span>
        </label>
      </div>
      <div class="c-checkbox--medium">
        <input class="c-checkbox__input" id="checkbox_2x" type="checkbox">
        <label for="checkbox_2x">
          <span class="c-checkbox__checkbox">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" focusable="false" width="0.4375em" height="0.4375em" viewBox="0 0 78.369 78.369">
              <g>
                <path d="M78.049,19.015L29.458,67.606c-0.428,0.428-1.121,
                        0.428-1.548,0L0.32,40.015c-0.427-0.426-0.427-1.119,
                        0-1.547l6.704-6.704c0.428-0.427,1.121-0.427,
                        1.548,0l20.113,20.112l41.113-41.113c0.429-0.427,1.12-0.427,
                        1.548,0l6.703,6.704C78.477,17.894,78.477,18.586,78.049,19.015z"></path>
              </g>
            </svg>
          </span>
          <span>Brandgul</span>
        </label>
      </div>
      <div class="c-checkbox--medium">
        <input class="c-checkbox__input" id="checkbox_3x" type="checkbox">
        <label for="checkbox_3x">
          <span class="c-checkbox__checkbox">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" focusable="false" width="0.4375em" height="0.4375em" viewBox="0 0 78.369 78.369">
              <g>
                <path d="M78.049,19.015L29.458,67.606c-0.428,0.428-1.121,
                        0.428-1.548,0L0.32,40.015c-0.427-0.426-0.427-1.119,
                        0-1.547l6.704-6.704c0.428-0.427,1.121-0.427,
                        1.548,0l20.113,20.112l41.113-41.113c0.429-0.427,1.12-0.427,
                        1.548,0l6.703,6.704C78.477,17.894,78.477,18.586,78.049,19.015z"></path>
              </g>
            </svg>
          </span>
          <span>Citrongul</span>
        </label>
      </div>
    </fieldset>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radioinput_4" name="radio-inputtext" type="radio" value="Röd">
    <label for="radioinput_4">Röd</label>
  </div>
  <div class="input-child-component" data-radiobutton-id="radioinput_4" rel="c-radioChildWraper-js">
    <div class="c-input--small">
      <label for="input-text-3">Förnamn</label>
      <div class="c-input__wrapper">
        <input autocomplete="given-name" id="input-text-3" name="text1" type="text">
        <div class="icon"></div>
      </div>
    </div>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radioinput_5" name="radio-inputtext" type="radio" value="Violet">
    <label for="radioinput_5">Violet</label>
  </div>
  <div class="input-child-component" data-radiobutton-id="radioinput_5" rel="c-radioChildWraper-js">
    <div class="c-select--medium">
      <label for="field-1">Välj din favoritfrukt</label>
      <div class="c-select__wrapper">
        <select id="field-1" onchange="this.dataset.empty = this.value == ''">
          <option value="">-- Inget valt --</option>
          <option>Ananas</option>
          <option>Apelsin</option>
          <option>Banan</option>
          <option>Blodapelsin</option>
          <option>Clementin</option>
          <option>Dadel</option>
          <option>Kiwifrukt</option>
          <option>Päron</option>
          <option>Äpple</option>
        </select>
        <span class="sjv-i-caret-ner ikon"> </span>
      </div>
    </div>
  </div>
  <div class="c-radio-btn--medium">
    <input id="radioinput_6" name="radio-inputtext" type="radio" value="Rosa">
    <label for="radioinput_6">Rosa</label>
  </div>
  <div class="input-child-component" data-radiobutton-id="radioinput_6" rel="c-radioChildWraper-js">
    <div class="c-textarea--medium" rel="c-text-counter-js">
      <label for="textarea1">Kommentar</label>
      <textarea class="textarea_exempel" id="textarea1" maxlength="200" rows="4" wrap="soft"></textarea>
      <div class="input__undertext">
        <p class="c-text-counter"></p>
      </div>
    </div>
  </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>