How to place two icons for one input field on a mobile app?

Question

I want to put both an info and a clear icon for each text field. How should I design it w/o it looking awkward? Or, is two even necessary?

EDIT: How do I style it for an "if applicable" text field? It's optional but not really -- only necessary when the user enters a product that comes in multiple shades.

Danielillo · Answer

Perhaps the information button is unnecessary indicating each title as a link (underlined)

Mike M · Answer

Try putting it in proximity to the label, not the input.

This allows a user to read the label, and get more information right next to it.
This separates it from the interactivity associated with entering the value in the input field. This also gives you a longer input field, and doesn't confuse an icon which represents an action (clear) with an tooltip.
It's only necessary to have more info when it's potentially unclear what the label (and its input) represents. So you can use as needed, as opposed to having it for every label.

How to place two icons for one input field on a mobile app?

2 Answers

Add your own answers!

Ask a Question