Hint
A short line of text under a field that helps before it is filled, or says what went wrong or right after. It carries a small icon so the meaning does not rest on colour.
Preview
Tone
Letters, numbers and underscores only.
When to use
- For format help that saves a mistake: At least 8 characters.
- For validation after the field is left or the form is sent.
- For confirmation that a value is accepted, where that is not obvious: Username is available.
Reach for something else
- For messages about the whole form or page: that is an Alert.
Anatomy
- 1
Icon
16px, matching the tone: info, error or success.
- 2
Text
One short sentence, in the tone's colour.
States
Helper
Neutral grey, shown before input.
Error
Red, with an alert icon; the field border turns red too.
Success
Green, with a tick.
Warning
Amber, for a value that is allowed but risky.
Accessibility
- The field references the hint with aria-describedby, so it is read after the label.
- An error sets aria-invalid on the field, and the hint text says how to fix it, not just that it is wrong.
- Icons are decorative (aria-hidden); the words carry the meaning.
Source
The Hint is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
Tell me when the source landsTell me when the source landsand you'll get 10% off your first licence if you ever want the full library.
See it in a block