lightning:input with type="toggle" - any way to restrict clicks to only the toggle button?

Question

I'm using the lightning:input component with type="toggle" and have noticed that it accepts clicks outside the toggle button itself. For example, if I click to the left of the button and on the label, the value changes. I can also click to the right of the button on empty space (as far as the container goes I think) and the value will change.

Is there any way to change this component's behavior so that it accepts clicks on the toggle button only, and nowhere else?

Here's some sample code:

testLightningInput_App:

<aura:application >
    <ltng:require styles="{!$Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system-ltng.min.css'}"/>

    <div class="(scope_name)-slds">
        <c:testLightningInput />
    </div>
</aura:application>

testLightningInput.cmp:

<aura:component >
    <aura:attribute name="checked" type="Boolean" default="false"/>

    <lightning:input name="toggle"
                     label="Toggle Label"
                     type="toggle"
                     checked="{!v.checked}"
                     onchange="{!c.handleToggleChanged}">
    </lightning:input>
</aura:component>

testLightningInputController.js:

({
    handleToggleChanged : function(component, event, helper) {
        var checked = component.get("v.checked");
        console.log("checked is now = " + checked);
    }
})

Answer 1

If you're using lightning:input, no. The label serves to activate the toggle, in the same way that a label serves to activate a text input or select list. You could build it out in slds to get a similar look without the feature, but this isn't considered user-friendly (and possibly less accessible to users with screen readers or other accessibility software enabled). You should consider leaving the functionality the way it is unless it's causing major usability issues.

Answer 2

If you're using lightning:input with type="toggle" & noticed that it accepts clicks outside the toggle button itself then you can fix this issue by using css. You just need to target the slds-form-element__control class & apply display:inline-block property.

.slds-form-element__control{ display:inline-block; }