isDisabled

Help text using the neutral variant can be displayed in a disabled state. The text appears with a lighter gray that matches the style of other components in a disabled state. Help text using the negative variant cannot be displayed in a disabled state because it communicates an error, and error messages should not be visible when the component is disabled.

size

Help text comes in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly and pair them with components of the same size to respect the built-in hierarchy.

hideIcon

Help text using the negative variant can have an optional icon. In most cases, help text is used with a component that already displays an icon communicating an error (e.g., text field, text area, picker, combo box), so it's not necessary to include another icon. In other cases, help text that is used with a component that does not display an icon communicating an error (e.g., checkbox group, radio group) needs to display an icon.

variant

Help text has two variants: neutral and negative. The neutral variant is used to convey informative messages, while the negative variant is used to convey error messages.

text

The text can accommodate either a description or an error message, giving extra context and guidance. Sometimes this communicates what to input or select, and sometimes it communicates how. It includes information such as:

• An overall description of an input field or controls
• Hints for what kind of information needs to be input or selected
• Specific formatting examples or requirements

Regardless of the kind of message, it should be clear and concise. Use 1-2 short, complete sentences that end with a period (never an exclamation point). When showing formatting examples, it's not necessary to end with a period.