Use the optional icon depending on the accompanying component

For the optional icon that can be displayed with the negative variant, usage depends on what kind of component the help text is accompanying. Whether to include the optional icon with the negative variant depends on the component that the help text accompanies.

For components such as text field, text area, picker, and combo box, where there is already an icon communicating an error, it's not necessary to include another icon in the help text. For checkbox groups or radio button groups, where there is no icon to communicate an error, include the optional icon.

Switch the help text description with an error message

Help text displays either a description (the neutral variant) or an error message (the negative variant) in the same space. When a description is present and an error is triggered, it is replaced with an error message. Once the error is resolved, the help text description reappears.

Because one replaces the other, the language of the help text description and the error need to work together to convey the same messaging. The description text explains the requirements or adds supplementary context for how to successfully interact with a component. The error message text restates the same requirements, guiding the user to fix the issue. Make sure that the help text description and error message include the same essential information so that it isn't lost if one replaces the other.

Learn how this applies to help text for text field, text area, combo box, and picker.

Write error messages that show a solution

Communicate error messages in a human-centered way by guiding a user and showing them a solution — don't simply state what's wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error to a user.

For help text, usually the error is related to something that needs to be fixed for in-line validation, so a helpful tone is most appropriate. For example, if someone were to miss filling out a required field that asks for their email address, write the error text like you're offering a hint or a tip to help guide them to understand what needs to go in the missing field: "Enter your email address."

Learn how this applies to help text for text field, text area, combo box, and picker.