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.

1 Answer 1

3

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .