September 20, 2023

Common Input Types used in LWC

**Read the commented part as well for some extra features of input types.

lwcInputExample.html

<!--  
                There are some common attribute used like required, readonly, disabled for all the input types
                
                example type="text"
                
                <lightning-input type="text" label="Enter some text" value={textValue} onchange={handleTextChange} required readonly disabled></lightning-input>
                
                you can also write like this
                <lightning-input type="text" label="Enter some text" value={textValue} onchange={handleTextChange} required="true" readonly="true" disabled="true"></lightning-input>
                
                if you want to make it required/disabled/readonly on conditional basis then you need to use a track variable
                    <lightning-input type="text" label="Enter some text" value={textValue} onchange={handleTextChange} required={isRequired}></lightning-input>
                    readOnly={isReadOnly} disabled={isDisabled}
                
    -->
    <template>
    
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <!--  
                onfocus 			- When clicked in the text box
                onblur 				- When focus is moved away
                minlength="6"		- minimun length of the value should be 6
                maxlength="8"		- maximum length of the value should be 8
            -->
            
            <div class="slds-p-around_medium">
                <lightning-input type="text" label="Enter some text" value={textValue} onchange={handleTextChange}></lightning-input>
            </div>
            
            <div class="slds-m-vertical_medium">
                <p>The value of the text field is: <span class="slds-text-heading_small">{textValue}</span></p>
            </div>
        </div>
        
        
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <!-- 
                Used for date range
                min="2020-09-05" 		- date should be greater than this date
                max="2020-09-22" 		- date should be less than this date
            -->
            
            <div class="slds-p-around_medium">
                <lightning-input type="date" label="Date field with min and max values" value={dateValue} onchange={handleDateChange} ></lightning-input>
            </div>

            <div class="slds-m-vertical_medium">
                <p>The value of the date field is: <span class="slds-text-heading_small">{dateValue}</span></p>
            </div>
        </div>
        
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <!-- 
                Used for datetime range
                min="2020-08-03T08:20:44Z"		- datetime should be greater than this datetime
                max="2020-09-25T22:33:44Z"		- datetime should be less than this datetime
            -->
            
            <div class="slds-p-around_medium">
                <lightning-input type="datetime" label="Date Time field" value={dateTimeValue} onchange={handleDateTimeChange} ></lightning-input>
            </div>

            <div class="slds-m-vertical_medium">
                <p>The value of the date time field is: <span class="slds-text-heading_small">{dateTimeValue}</span></p>
            </div>
        </div>
        
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <!-- 
                multiple - if you use multiple then you can take multiple email in comma seperated.
                <lightning-input type="email" label="Email addresses" value={email} onchange={handleEmail} multiple></lightning-input>
            -->
            
            <div class="slds-p-around_medium">
                <lightning-input type="email" label="Email addresses" value={email} onchange={handleEmail}></lightning-input>
            </div>

            <div class="slds-m-vertical_medium">
                <p>The value of the email field is: <span class="slds-text-heading_small">{email}</span></p>
            </div>
        </div>
        
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <!-- 
                1. formatter="percent"
                        Used for percentage (Use step="0.01" for number upto two decimal places.)
                2. formatter="currency"
                        Used for price 		(Use step="0.01" for number upto two decimal places.)
                3. max=100 
                        value cannot be more than 100
            -->
            
            <div class="slds-p-around_medium">
                <lightning-input type="number" name="seven" value={amount} onchange={handleAmountChange} placeholder="type the number of items..." label="Enter a number" ></lightning-input>
            </div>

            <div class="slds-m-vertical_medium">
                <p>The value of the number field is: <span class="slds-text-heading_small">{amount}</span></p>
            </div>
        </div>
        
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <!-- 
                you can use checked instead of checked={isChecked}
            -->
            <div class="slds-p-around_medium">
                <lightning-input type="checkbox" onchange={handleCheckBoxChange} checked={isChecked} label="Basic option"></lightning-input>
            </div>

            <div class="slds-m-vertical_medium">
                <p>The value of the checkbox field is: <span class="slds-text-heading_small">{isChecked}</span></p>
            </div>
        </div>
        

    </template>

lwcInputExample.js

import { LightningElement } from 'lwc';

    export default class LwcInputExample extends LightningElement {
        textValue;
        dateValue;
        dateTimeValue;
        email;
        amount;
        isChecked;

        handleInputChange(event) {
            this.textValue = event.detail.value;
        }
        
        handleDateChange(event){
            this.dateValue=event.target.value;
        }
        
        handleDateTimeChange(event){
            this.dateTimeValue=event.target.value;
        }
        
        handleEmail(event){
            this.email=event.target.value;
        }
        
        handleAmountChange(event){
            this.amount=event.target.value;
        }
        
        handleCheckBoxChange(event){
            this.isChecked=event.target.checked;
        }
            
    }

Decorators in LWC

HTML Template Directives in LWC

5 2 votes

Article Rating

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments