Now-UI-Kit checkbox validation issue

by Stefano

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/css/now-ui-kit.css">
<form method="POST" action="#" class="">
    <div class="form-group ">
        <label for="username">Username*</label>
        <input id="username" type="text" class="form-control" name="username" value="" required>
    </div>
    
    <div class="form-check">
        <label class="form-check-label">
            <input type="checkbox" class="form-check-input" name="terms_and_conditions" required>
            <span class="form-check-sign"></span>
            I accept Terms and Conditions
        </label>
    </div>

    <button type="submit" class="btn btn-primary">Register</button>
</form>

CSS

form {
  margin: 20px auto;
  width: 70%;
}

/* corrective solution */
.form-check input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    visibility: initial !important;
    left: 27px;
    top: 8px;
}