Hello, today I will show you how you can create your own custom
Currently, not all inputs have an icon inside it. The
You can use any SLDS Icons but
Here is the sample form I have built using SLDS and
Here is the HTML code for it.
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:
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:
- Use
slds-input-has-icon_left
on the parent div. - 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.
Keep going Rahul
ReplyDeleteThank you Unknown User!!
ReplyDeleteCan we make the icon here to clickable and call any function?
ReplyDeleteyes you can, just add onclick handler.
Delete