Radio

Radio buttons allow selection of one of multiple options.

Basic

HTML
    <form class="form">
  <div class="form__item">
    <div class="radio">
      <input type="radio" name="Radio" id="radio_single" value="radio">
      <label for="radio_single">Label</label>
    </div>
  </div>
</form>
  

Group

Group label
Description
HTML
    <form class="form">
  <div class="form__item">
    <div class="radio-group">
      <div class="radio-group__label">Group label</div>

      <div class="radio">
        <input type="radio" name="Radio" id="radio_1" value="radio_1">
        <label for="radio_1">First label</label>
      </div>

      <div class="radio">
        <input type="radio" name="Radio" id="radio_2" value="radio_2">
        <label for="radio_2">Second label</label>
      </div>

      <div class="radio">
        <input type="radio" name="Radio" id="radio_3" value="radio_3">
        <label for="radio_3">Third label</label>
      </div>

      <div class="radio">
        <input type="radio" name="Radio" disabled="disabled" id="radio_4" value="radio_4">
        <label for="radio_4">Fourth label</label>
      </div>
    </div>
    <div class="form__description">Description</div>
  </div>
</form>
  

Usage

Attribute Description Possible values Type Required Default
disabled Set with disabled on input disabled string - -
checked Set with checked on input checked string - -