Help Text

Small instructional copy near a form field that guides users on what to enter or what went wrong. Status variants pair the message with a Status Icon.

Install

Examples

Default

Plain hint copy with no icon.

Info

Warning

Negative

Positive

Sizes

Three sizes — l (default), m, and s — to match the field they describe.

Guidelines

Usage

field hints, validation messages, and success feedback. Most inputs accept a help-text prop that renders this component for you.

Do

  • Keep it short and specific — say what to enter or exactly what’s wrong.
  • Use negative for errors and positive for confirmation.
  • Place it directly below the field it describes.

Don’t

  • Don’t restate the label — add information the label doesn’t already give.
  • Don’t stack several help texts on one field; lead with the most important.
  • Don’t rely on colour alone — the wording must carry the meaning.

Accessibility

Properties

Related