Radio button group

Radio button 1

Radio button 2

Radio button 3

HTML

    
<fieldset class="form__field radio-button-group">
  
  <div class="radio-button">
    <label>
      <input id="radios-radio_button_1" name="radios" value="radio_button_1" type="radio"   />
      Radio button 1
      <span class="checkmark"></span>
    </label>
  </div>
  
  <div class="radio-button">
    <label>
      <input id="radios-radio_button_2" name="radios" value="radio_button_2" type="radio"   />
      Radio button 2
      <span class="checkmark"></span>
    </label>
  </div>
  
  <div class="radio-button">
    <label>
      <input id="radios-radio_button_3" name="radios" value="radio_button_3" type="radio"   />
      Radio button 3
      <span class="checkmark"></span>
    </label>
  </div>
  
</fieldset>

SCSS

    .radio-button-group {
  position: relative;
  border: none;
  margin: 0 0 28px;
  padding: 0;
}

.radio-button-group--compact {
  .radio-button {
    display: inline;
  }

  label {
    display: inline;
    padding: 0 24px 0 32px;
  }

  .checkmark {
    top: -4px;
  }
}

Connect Dementia Research

Pattern Library

Radio button group

HTML

SCSS