Custom checkboxes not working with required tag

I have a number of checkboxes I would like a client to tick/mark before a form is submitted successfully. I added required to the <input> tag and before I customised the checkboxes it work as expected - with a popup alert.

However since customising the checkboxes I am no longer getting the required popup alert. Any ideas what I have done wrong here?

image of customised checkboxes

HTML

<label class="label" for="radio-6">
  <input class="checkbox" id="radio-6" type="checkbox" required>
  <span class="custom-checkbox" role="checkbox" aria-checked="false" aria-labelledby="radio-6"></span>
  <span class="checkbox-text">Example text</span>
</label>

CSS/SASS

.label {
   display: block;
   position: relative;
   user-select: none;
   cursor: pointer;
}

.label input {
   position: absolute;
   opacity: 0;
   height: 0;
   width: 0;
}

.custom-checkbox {
   position: absolute;
   border-radius: 50%;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
   background-color: $white;
   border: solid 1px $f-color;

   &:after {
      content: "";
      position: absolute;
      display: none;
   }
}

.label input:checked ~ .custom-checkbox {
   background-color: $white;
   border: solid 1px $p-color;
}

.label input:checked ~ .custom-checkbox:after {
   display: block;
}

.label .custom-checkbox:after {
   left: 12px;
   top: -8px;
   width: 7px;
   height: 22px;
   border: solid $p-color;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}