Check if the lightning-input checkbox field is checked or not.

Creating input forms is one of the most build functionalities in LWC Components. The fields on the input form should be captured for further processing (validation, saving etc.). In this article we are going to cover how to check if the lightning-input checkbox field is checked or not.

This article covers:

• Creating an input form with check box in LWC
• Get values from input fields in JS File
• Check if the checkbox is checked or not
• Conclusion

Watch this recorded session

Create an input form with checkbox in LWC

HTML Code

<template>
<lightning-input type="text" name="name" label="Name" onchange={changeHandler}>
    </lightning-input>
 <lightning-input type="checkbox" name="valid" label="Is Valid User" onchange={changeHandler}>
    </lightning-input>
</template>

Explanation

We have a basic HTML Code where we have used two lightning-input field components one of type checkbox and another of type text.

We want to capture the values of both the fields in JS File and then do further operations on it, by clicking on Submit button.

To learn more about using lightning-input and its specifications, read the documentation here.

Get values from input fields in JS File

JS Code

import { LightningElement} from 'lwc';
export default class FormSubmissionDemo extends LightningElement
{

 //Created a JSON Object to store all the fields value, in key value pair
 formInput = {};

 changeHandler(event) {
   let name = event.target.name;
   let value = event.target.value;

   if(name == 'valid')
   {
      //event.target.checked returns true if checked false if not
      this.formInput[name] = event.target.checked;
   }
   else
   {
      this.formInput[name] = event.target.value;
   }
}

Explanation

In the JS File, we have created a JSON object called formInput, which will be dynamically updated in changeHandler method. Whenever there is a change in the values of the lightning-input fields, the changeHandler method is triggered.

• event.target.name : Using event.target.name we can identify which field is being updates.
• event.target.value : Gives us the value in the field being updated.

In case of a checkbox, we use event.target.checked to find if it’s checked or not.

Check if the checkbox is checked or not

In case of a checkbox we are going to use event.target.checked to find if it’s checked or not.

As the syntax to get the state if checkbox is different, we need to place a if-else block in the changeHandler. In a checkbox is the field being changes we use event.target.checked else we use event.target.value.

Note: Using an empty JSON Object to save the lightning-input field values dynamically is an efficient way of handling changes. Most naive developers use a single variable each field, which is a very bad design as it difficult to maintain as the complexity of the code increases.

This is just a basic code that should give you a clear understanding of how to use an on-change event handler to see if the targeted checkbox is checked or not.

Demo

Conclusion

You can see the final result of the code and see how on mouse click the checkbox we get true or false along with the name of the field which is changing.

Feel free to use the provided code snippets in your own Salesforce org and experiment with different fields and form submissions in LWC.

We welcome your feedback and suggestions in the comments section below.

Don’t forget to subscribe to our newsletter for more Salesforce tips and share this article with your fellow developers!