Using Help Prompts
A great form guides users through filling out and submitting.
There are often times when a field may ask something of our users that requires a little extra cognitive load. To reduce this load provide a visible help prompt rather than hiding information behind a tooltip.
A clear label followed by a simple help prompt increases the user's understanding and their chance of success.
Help prompts aren't required on every field so you don't have to use them all the time. However, if the well-written label you have created needs some further explaining be sure to include a prompt.
Apply the help prompt between the label and the input container.
Appearance
The font size of a help prompt is 14px or 0.875rem IBM Plex Sans Bold.
150% line-height.
Line height for labels is 150% or 1.5em for extra readability.
To create a visual hierarchy with labels and the font-weight is set to regular. This draws the user's attention to the label first and then the help prompt.
Help Prompt Length & Height
The maximum length of a help prompt is set at 480px.
This width combined with the 14px size of the IBM Plex Sans Regular allows for a comfortable number of characters & words on each line for reading.
Help prompts with a character count longer than 480px will wrap and the height of the label grows with its contents.
Avoid extremely long help prompts. This can disrupt the rhythm of the form layout, increase scrolling and create unease through having too much to read. Remember that users like to scan forms and enter data quickly.