3

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);
    }
})

2 Answers 2

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.

1
  • I showed the mockup containing this toggle feature to our Support team, and they wanted the clicks registered only when clicking on the toggle button itself. I found a couple websites explaining how to style toggles using pure CSS, so I may have to create them that way to get the functionality they want. Nov 9, 2016 at 0:36
1

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; }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .