Conditional checkbox group

Yes

Option 1

Option 2

Option 3

HTML

    
<fieldset class="form__field conditional-checkbox-group">
  <div class="radio-button">
    <label>
      <input id="ccg-id-no" name="ccg-id-yesno" data-checkboxes-enabled="false" value="no" type="radio" />
      No
      <span class="checkmark"></span>
    </label>
  </div>
  <div class="radio-button">
    <label>
      <input id="ccg-id-yes" name="ccg-id-yesno" data-checkboxes-enabled="true" value="yes" checked type="radio" />
      Yes
      <span class="checkmark"></span>
    </label>
  </div>
  <div class="checkboxes">
    
    <div class="checkbox">
      <label>
        <input id="option-3-option_3" name="option-3" value="option_3" type="checkbox" />
        Option 3
        <span class="checkmark"></span>
      </label>
    </div>
    
  </div>
</fieldset>

SCSS

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

.checkbox-group--compact {
  .checkbox {
    display: inline;
  }
}

Connect Dementia Research

Pattern Library

Conditional checkbox group

HTML

SCSS