[SalesForce] How to Update Toggle button based on Checkbox in LWC

Want to update checkbox based on toggle option in LWC Salesforce.

<lightning-input type="checkbox" label=" " name="Active" onclick={handleChange}></lightning-input>

Best Answer

Check this documentation link in LWC which has example of what you are asking for

<!-- helloConditionalRendering.html -->
<template>
    <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>
            <template if:true={areDetailsVisible}>
                <div class="slds-m-vertical_medium">
                    These are the details!
                </div>
            </template>
        </div>
    </lightning-card>
</template>

Code to toggle is in the below js file

// helloConditionalRendering.js
import { LightningElement, track } from 'lwc';

export default class HelloConditionalRendering extends LightningElement {
    @track areDetailsVisible = false;

    handleChange(event) {
        this.areDetailsVisible = event.target.checked;
    }
}
Related Topic