Adding an icon within Input component

[Thaban]

Hi,

I don't see any examples of adding an icon within a input component. I need to be able to put it on the right of left side of icon within the input box. Can someone explain how to do this?

Thaban

[Stefan]

Hello, Thaban,

This can be achieved using some of the KendoReact classes and a span element to wrap the input and the icon.

This is an example of inputs with icon and the left and input with icon on the right:

https://stackblitz.com/edit/react-w8gjvn?file=app/main.jsx

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Thaban]

Hi Stefan,

How can i use this with Input React Component. I need to also use this with Masked Input and Numeric Input. This method is seems to create input using html tag <input> not the react input <Input>.

Thanks,

 

Thaban

[Stefan]

Hello, Thaban,

Currently, this is the supported way, as the input elements do not allow rendering other elements inside of them. This is how the DOM input element works, and we have no control over it.

The only possibility is to use a wrapper element and place the icon inside it, then set a border to that element, and remove the border of the input type element.

As for the Numeric and the MaskedTextBox, this will require custom DOM manipulations to add the icon element inside of it:

https://stackblitz.com/edit/react-w8gjvn-o9avwm?file=app/main.jsx

Please have in mind that this is not supported out of the box, so it will require custom code and styles.

Regards,
Stefan
Progress Telerik