CODEWITHSUNDEEP
salesforcesalesforce-lightninglwclightning
Vijay Mangal
Vijay Mangal

Reputation: 81

Change Icon position in lightning-input for search type in LWC

I am using standard lightning-input LWC component for search field in my project. By default it shows the search icon on the left side inside the field. How can I shift this icon to right side? I am using the following code:

<lightning-input
            name="enter-search"
            label="Search when user hits the 'enter' key"
            type="search">
</lightning-input>

Upvotes: 0

Views: 4124

Answers (1)

Rajat Jaiswal
Rajat Jaiswal

Reputation: 76

You need to add these classes to lightning-icon: slds-icon, slds-input__icon, slds-input__icon_right and slds-icon-text-default.

 <div class="slds-form-element">
        <label class="slds-form-element__label" for="text-input-id-1">Input Label</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="Placeholder Text" class="slds-input" />
        </div>
    </div>

Upvotes: 1

Related Questions