Radio buttons

Go to the installation documentation
        
<!-- Radios -->
<form id="radios" class="coop-form" novalidate>
  <h3>Radios</h3>

  <fieldset id="radio-1" class="coop-form__row">
    <legend class="coop-form__label">Type of delivery</legend>

    <p id="radio-1-error" class="coop-form__error" hidden></p>

    <div class="coop-form__choice">
      <input type="radio" name="radio-1" id="radio-1-1" value="1" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-1-1">Free delivery</label>
    </div>

    <div class="coop-form__choice">
      <input type="radio" name="radio-1" id="radio-1-2" value="2" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-1-2">Next day delivery — £4.99</label>
    </div>
  </fieldset>
</form>

        
<!-- Radios with hint -->
<form id="radios-hint" class="coop-form" novalidate>
  <h3>Radios with hint</h3>

  <fieldset id="radio-2" class="coop-form__row" aria-describedby="radio-2-hint">
    <legend class="coop-form__label">Type of delivery</legend>

    <p id="radio-2-hint" class="coop-form__hint">Select only one option</p>
    <p id="radio-2-error" class="coop-form__error" hidden></p>

    <div class="coop-form__choice">
      <input type="radio" name="radio-2" id="radio-2-1" value="1" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-2-1">Free delivery</label>
    </div>

    <div class="coop-form__choice">
      <input type="radio" name="radio-2" id="radio-2-2" value="2" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-2-2">Next day delivery — £4.99</label>
    </div>
  </fieldset>
</form>

        
<!-- Radios with error message -->
<form id="radios-error" class="coop-form" novalidate>
  <h3>Radios with error message</h3>

  <fieldset id="radio-3" class="coop-form__row" aria-describedby="radio-3-error">
    <legend class="coop-form__label">Type of delivery</legend>

    <p id="radio-3-error" class="coop-form__error">Select type of delivery</p>

    <div class="coop-form__choice">
      <input type="radio" name="radio-3" id="radio-3-1" value="1" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-3-1">Free delivery</label>
    </div>

    <div class="coop-form__choice">
      <input type="radio" name="radio-3" id="radio-3-2" value="2" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-3-2">Next day delivery — £4.99</label>
    </div>
  </fieldset>
</form>

        
<!-- Radios with hint and error message -->
<form id="radios-hint-error" class="coop-form" novalidate>
  <h3>Radios with hint and error message</h3>

  <fieldset id="radio-4" class="coop-form__row" aria-describedby="radio-4-hint radio-4-error">
    <legend class="coop-form__label">Type of delivery</legend>

    <p id="radio-4-hint" class="coop-form__hint">Select only one option</p>
    <p id="radio-4-error" class="coop-form__error">Select type of delivery</p>

    <div class="coop-form__choice">
      <input type="radio" name="radio-4" id="radio-4-1" value="1" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-4-1">Free delivery</label>
    </div>

    <div class="coop-form__choice">
      <input type="radio" name="radio-4" id="radio-4-2" value="2" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-4-2">Next day delivery — £4.99</label>
    </div>
  </fieldset>
</form>