2

How to place the search Icon Inside of lightning input in right side.

<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 icon-name="utility:search"   title="Search" />
<input id="text-input-id-1" class="slds-input" type="text" value="" />
</div>
</div> 

the above code display like below.

enter image description here

Tried <lightning-input type="search"> the search Icon is in left side, Expecting to show the icon in right side. Can You Please help me on this.

2

Use this, You need to apply this class to lightning-icon: slds-icon slds-input__icon slds-input__icon_right 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>

Playground

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.