Helper Text

What is Helper Text? 

Helper Text is what UX designers call an assistive page element. 

It helps users complete a task, particularly when filling in forms, like shown above. 

Helper Text models the information an input requires. 

It assists users to input correctly whatever is needed - the order of names (Firstname Lastname), the structure of dates (DD/MM/YYYY) and so forth - in the field itself.

Helper Text is superuseful in situations where inputs need to be validated before they go into a database. Why? Because if errors are made, they are reported immediately where/when they happen, saving the time/effort of submitting a form and having it rejected.

If Helper Text is NOT used in situations where inputs can bounce for incorrect formatting, the experience can leave users feeling frustrated that they are doing something wrong. Or thinking that the form itself is broken. 

Helper Text  is often lighter than the rest of the text on the form, and it disappears when no longer needed. For this reason UX designers sometimes call it Hint Text or Ghost Text. 

Helper Text is just one type of assistive page element - others include Error Messages that display when an input is not accepted, Character Counters to show if there is a limit, and Icons that offer functionality such as a microphone for voice inputs. 

Helper Text is a little big deal. 

More about Helper Text here ... https://material.io/components/text-fields#anatomy