Input Options

<div class="input-group">
  <div class="input--checkbox">
    <input type="checkbox" id="checkbox-default" name="checkbox-default" class="sr-only" />
    <label for="checkbox-default" class="input__label"> Checkbox default </label>
  </div>
</div>
<div class="input-group">
  <div class="input--checkbox">
    <input type="checkbox" id="checkbox-checked" name="checkbox-checked" checked class="sr-only" />
    <label for="checkbox-checked" class="input__label"> Checkbox checked </label>
  </div>
</div>

<div class="input-group">
  <div class="input--checkbox">
    <input type="checkbox" id="checkbox-default-disabled" name="checkbox-default-disabled" class="sr-only" disabled />
    <label for="checkbox-default-disabled" class="input__label"> Checkbox default disabled </label>
  </div>
</div>
<div class="input-group">
  <div class="input--checkbox">
    <input
      type="checkbox"
      id="checkbox-checked-disabled"
      name="checkbox-checked-disabled"
      checked
      class="sr-only"
      disabled
    />
    <label for="checkbox-checked-disabled" class="input__label"> Checkbox checked disabled </label>
  </div>
</div>

<div class="input-group">
  <div class="input--radio">
    <input type="radio" id="radio-default" name="radio" class="sr-only" />
    <label for="radio-default" class="input__label">Radio default </label>
  </div>
</div>
<div class="input-group">
  <div class="input--radio">
    <input type="radio" id="radio-checked" name="radio" checked class="sr-only" />
    <label for="radio-checked" class="input__label">Radio checked </label>
  </div>
</div>

<div class="input-group">
  <div class="input--radio">
    <input type="radio" id="radio-default-disabled" name="radio-disabled" class="sr-only" disabled />
    <label for="radio-default-disabled" class="input__label">Radio default disabled </label>
  </div>
</div>
<div class="input-group">
  <div class="input--radio">
    <input type="radio" id="radio-checked-disabled" name="radio-disabled" checked class="sr-only" disabled />
    <label for="radio-checked-disabled" class="input__label">Radio checked disabled </label>
  </div>
</div>

<div class="input-group">
  <div class="input--toggle">
    <input type="checkbox" id="toggle-default" name="toggle-default" class="sr-only" />
    <label for="toggle-default" class="input__label"> Toggle default </label>
  </div>
</div>
<div class="input-group">
  <div class="input--toggle">
    <input type="checkbox" id="toggle-no-label" name="toggle-no-label" class="sr-only" />
    <label for="toggle-no-label" class="input__label">&#8203;</label>
  </div>
</div>
<div class="input-group">
  <div class="input--toggle">
    <input type="checkbox" id="toggle-checked" name="toggle-checked" checked class="sr-only" />
    <label for="toggle-checked" class="input__label"> Toggle checked </label>
  </div>
</div>

<div class="input-group">
  <div class="input--toggle">
    <input type="checkbox" id="toggle-default-disabled" name="toggle-default-disabled" class="sr-only" disabled />
    <label for="toggle-default-disabled" class="input__label"> Toggle default disabled </label>
  </div>
</div>
<div class="input-group">
  <div class="input--toggle">
    <input type="checkbox" id="toggle-no-label-disabled" name="toggle-no-label-disabled" class="sr-only" disabled />
    <label for="toggle-no-label-disabled" class="input__label">&#8203;</label>
  </div>
</div>
<div class="input-group">
  <div class="input--toggle">
    <input
      type="checkbox"
      id="toggle-checked-disabled"
      name="toggle-checked-disabled"
      checked
      class="sr-only"
      disabled
    />
    <label for="toggle-checked-disabled" class="input__label"> Toggle checked disabled </label>
  </div>
</div>