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.

2 comments:

Hi there, comments on this site are moderated, spams and promotions will be deleted. If you have any concern, or if you are not able to comment for some reason, reach email us at rahul@forcetrails.com