Forcetrails: How to create lightning input with icon inside - lwc

Hello, today I will show you how you can create your own custom lightning-input component with an icon inside it.

Currently, not all inputs have an icon inside it. The lightning-input with type = search does provide an inbuilt icon but we can not change its position to the right.

You can use any SLDS Icons but utility:icon are well supported to use inside the input fields.

Here is the sample form I have built using SLDS and lightning-icon component.


Here is the HTML code for it.
<div class="slds-p-around_large">
        <div class="slds-form-element">
            <div class="slds-text-heading_medium ">Icons Aligned Right</div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-1">Search City</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:search"></lightning-icon>
                <input type="text" id="text-input-id-1" placeholder="Type Text to Search" class="slds-input" />
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-2">Email</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:email"></lightning-icon>
                <input type="text" id="text-input-id-2" placeholder="Enter Your Email" class="slds-input" />
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-3">Password</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:password"></lightning-icon>
                <input type="text" id="text-input-id-3" placeholder="Enter Your Password" class="slds-input" />
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-4">Message</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                <lightning-icon size="x-small" style="top:15px" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:quick_text"></lightning-icon>
                <textarea id="text-input-id-4" placeholder="Enter Your message" class="slds-input"></textarea>
            </div>
        </div>

        <div class="slds-form-element slds-m-top_small">
            <div class="slds-text-heading_medium ">Icons Aligned Left</div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-5">Alternate Email</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">
                <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" icon-name="utility:email"></lightning-icon>
                <input type="text" id="text-input-id-5" placeholder="Alternate Email" class="slds-input" />
            </div>
        </div>
    </div>

You can copy-paste the code you want. You can change the icon as per your requirement.
If you want to align the icon to left then:
  1. Use slds-input-has-icon_left on the parent div.
  2. Use slds-input__icon_left on the lightning-icon
Note: You will have to write your own logic for validations and advanced features as standard lightning-input components.

12 comments:
  1. Can we make the icon here to clickable and call any function?

    ReplyDelete
    Replies
    1. yes you can, just add onclick handler.

      Delete
    2. Hi Rahul, I have added onclick into icon...but it is still not responsive ...could please help me in this

      Delete
    3. Hi Dear Unknown, can you share your relevant code in online playground - webcomponents.dev, so I can take a look.

      Delete
  2. Does this work under lightning-record-edit-form tag ?

    ReplyDelete
    Replies
    1. yes this works but you will need to add the fieldName attribute to your custom input and also need to handle the onchange functionality.

      Delete
  3. Can we add icons in one text field?

    ReplyDelete
    Replies
    1. Hi Dear Unknown, do you mean two Icons in one text field? Yes You can add, you might need to update some CSS to position it as you need.

      Delete
  4. can we have 2 icons one in left and one in right together

    ReplyDelete

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, reach email us at rahul@forcetrails.com