Help Text

Help Text provides brief, contextual guidance for form fields and other UI elements.

When to use

Use Help Text to offer optional clarification or instructions that aid the user in completing a field.
Use the Error variant to display validation messages when a field’s value is invalid.
Use the Warning variant to alert users to potential issues that don’t block submission.
Use the Success variant to confirm a correct entry or successful action.
Use the Disabled variant when the associated control is disabled and the help text should appear muted.

Don’t use Help Text to convey critical information that users must act on; use an alert or inline error instead.
Don’t replace field labels with Help Text; labels remain the primary identifier.
Don’t display Help Text redundantly for every field; only add it when it adds value.

Variant	Description	When to use
Default	Standard neutral styling for guidance.	General assistance that doesn’t indicate a state.
Error	Red styling indicating a validation error.	Show when the associated field has an error.
Warning	Amber styling indicating a cautionary note.	Show non‑blocking issues or suggestions.
Success	Green styling confirming a successful state.	Show after a value passes validation.
Disabled	Muted styling for disabled contexts.	Show when the related control is disabled.

Prop	Type	Default	Description
`variant`	`"Default" \| "Error" \| "Warning" \| "Success" \| "Disabled"`	`"Default"`	Visual style of the help text.

Associate the Help Text with its control via aria-describedby so screen readers read it together with the field.
Ensure the text meets at least a 4.5:1 contrast ratio against the background in all variants.
Do not rely on color alone to convey state; pair color with an icon or explicit wording when possible.
The Help Text should not be focusable; it provides supplementary information only.