Custom form field with icon

Product: PDFTron WebViewer

Product Version: 8.1

I’m currently working on digital signature app, and I need to make fully custom input fields with icon on the left or right for all text input fields. As shown on the image bellow
image
Icons must be dynamic for different inputs.
What is the best approach to make it? I’m building this app in React.

Thank you in advance!

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello iTarik,

Welcome to the PDFTron Community!

We have a guide on handling custom appearances here: PDFTron

Let me know if this works for you!

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.

Hello Gordon!
Thank you on answer, but it didn’t work for me, unfortunately. With this approach the dimensions of the annotation must preserve the aspect ratio of appearance, and that is not acceptable to me.
What I’ve used before is Annotations.TextWidgetAnnotation.prototype.createInnerElement, but with this approach input field doesn’t behave as expected. Any ideas?
Kind regards.

Hello iTarik,

The next steps would be adjusting the innerElement, or you could try grouping an image annotation on the side. When you modify the innerElement, what do you mean by “input field doesn’t behave as expected”?

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.