Salesforce Visualforce checkbox not clickable

Question

<div class="slds-form-element">
    <div class="slds-form-element__control">
         <span class="slds-checkbox">
             <apex:inputCheckbox value=" !sendNotificationToCreator}" rendered="true" id="sendNotificationToCreator"/>
             <label class="slds-checkbox__label" for="{!$Component.SendEmailNotificationToCaseCreator}">
                 <span class="slds-checkbox--faux"></span>
                 <span class="slds-form-element__label">{!$Label.SendEmailNotificationToCaseCreator}</span>
             </label>
         </span>
     </div>
  </div>

screenshot

In this code if i remove <span class="slds-checkbox"> only then the checkbox is clickable and that too without any styles.

How to make it work normally? I added the screenshot of checkbox without having span class and which is working not according to the styles.

I have other checkbox on the same vf page which have the exactly same code but they work properly.

Answer 1

Adding styleclass="slds-input" to the checkbox solved it in my case.