Helper text

Helper text provides additional information for a situation or action or allows us to explain the situation in more detail for the input it belongs to.

Design

Web component

Is documented

Status

Healthy

Figma component

Open in Figma

Storybook

Open link

Principles

Use when

additional detailed information needs to be provided for the form-input or card level.

inline statuses (error, warning, etc.) need to be displayed for incorrect values entered in inputs.

Don't use when

the details need to be provided for a button or another UI element, and furthermore, this detailed information does not carry primary value, use a tooltip instead.

when making a general announcement on the layout level; instead, use notification.

Structure

Icon (boolean)

Helper text (information, warning, error)

Properties

Statuses

Storybook failed to load. Please connect to the VPN to access.

Information

The information type is for when an action or field needs to be clarified, or if more specific information needs to be provided to the user.

Warning

A warning helper text can be used to inform users of potential issues with a string or input before they occur, emphasizing the importance of the action.

Error

An error message is also used to indicate that the input or action is destructive or incorrect.

Behavior

Positioning

The helper text must always be provided together with the related content. This situation helps it to instantly alert the situation occurring in the context or action.

Content

Helper text content should be direct and understandable. The information provided here should give a hint about the field it is in and, therefore, should be kept short. The sentence should be 1 or 2 sentences long.