Toggle Checkbox in Lightning Component

Biswajeet   December 13, 2017   3 Comments on Toggle Checkbox in Lightning Component

Sample Lightning Component:

<!--Sample.cmp-->
<aura:component>
    <aura:attribute name="toggleValue" type="String"/>
    <div class="slds-m-around--large">
        <div class="slds-form-element">
            <label class="slds-checkbox_toggle slds-grid">
                <span class="slds-form-element__label slds-m-bottom_none">Toggle Label </span>
                <ui:inputCheckbox aura:id="chkbox" class="slds-input" change="{!c.selectChange}"/>
                <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-checkbox_on">Enabled</span>
                    <span class="slds-checkbox_off">Disabled</span>
                </span>
            </label>
            <p><b>The toggle is {!v.toggleValue} </b></p>
        </div> 
    </div> 
</aura:component>

Sample Lightning Component JS Controller:

({
    selectChange : function(cmp, event, helper) {
        var checkCmp = cmp.find("chkbox");
        cmp.set("v.toggleValue" ,  checkCmp.get("v.value"));
    }
})

Output:

  • Avesh

    Hi,

    Thanks very much for this.

    I need to help with the further development of this code.

    I have included this code in my opportunity detail page and I want users to select the value on the detail page and store the value on that particular record. I am not sure if this is possible. Can you please provide me with some documentation if so.

    Thanks in Advance!

    Regards,

    Avesh

    • Yes it is possible, you have to develop a custom component and add it on your Opportunity lightning record page

      • Avesh

        Thanks Biswajeet for your reply
        I have added the component into my lightning record page but the changes are not saved into that record. Can you provide me some documentation so I can refer and make the changes in my code