12 Unique Ways to Use Input Icons in Text Fields

Dynamic input interactions

Are you tapping into the full potential of your text fields? They can do so much more than hold input. You can make them easier to fill out by using input trays.

An input tray is a small area inside a text field adjacent to the field label and input text. It allows you to place various icons there for dynamic input interactions. Here are twelve unique ways to use them to make your forms easier to fill out.

1. Unmask Passwords

Use the eye icon to unmask passwords for signups and logins. An eye with a slash over it toggles the password back to a masked state. Using this can reduce typos and facilitate input correction.

2. Copy Input

A copy icon can make copying and pasting input easier. Instead of forcing users to copy the input manually, you can provide a copy icon in the input tray. Clicking the icon would automatically copy the input to the clipboard.

3. Upload Files

An upload file field doesn't need a separate "browse" button. An upload icon in the input tray can do the job with fewer elements. When users click the field, it’ll let them browse their file system.

4. Tooltip Info

If users need more context to fill out a field, an info icon can inform them. Instead of placing the information around the field, you can set the icon in the input tray. It'll display a tooltip when users click it.