How to create lightning input with icon inside - lwc

Telegram logo Join our Telegram Channel
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.

17 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
    4. Note from Unknown User.

      I had the same issue.

      The Problem is, in the css class .slds-input-has-icon .slds-input__icon:not(button) disabled the pointer events: "pointer-events: none;". Set it back to pointer-events:all and the Events works as expected

      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
  5. Note from Unknown User.

    I had the same issue.

    The Problem is, in the css class .slds-input-has-icon .slds-input__icon:not(button) disabled the pointer events: "pointer-events: none;". Set it back to pointer-events:all and the Events works as expected

    ReplyDelete
    Replies
    1. Please let me know in CSS how exactly should i put it , i tried like this .slds-input__icon .slds-icon .slds-input-has-icon .slds-input__icon:not(button){
      pointer-events: auto;
      } it didnt worl

      Delete
    2. Hi Ravi, put this code in components .css file

      .slds-input-has-icon .slds-input__icon:not(button) {
      pointer-events: all;
      cursor: pointer;
      }

      see this live example: https://studio.webcomponents.dev/edit/kMrMvlwS4HEhvQTfJLMy/src/app.css

      Delete

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, email us at rahul@forcetrails.com