HelpText

Usage

Help text is a kind of component that is usually but not always used within another input component in Forms, such as Text Input, Select or similar. It is used to hint users with the corresponding input field such as type of input to be entered, type of file formats they need to upload, restrictions on input fields, hints on best passwords or validate the input after the user has entered it. They should not be used as the main source of guidance to fulfill the form but rather as a secondary or tertiary after Form Label and placeholder.

Help text can also be used to dynamically validate the input entered by user, and inform user when the input is valid, or invalid.

It can also be used as a standalone component that refers to the the group of fields or the whole Form element, guiding user on the whole Form, validating the input of the whole form inputs in aggregation, for example presenting Invalid type of Help text beneath the form element in Login forms that refers to the combination of username and password being invalid and not necessarily either one.

Types

Help text component has 4 types: Info, Invalid, Validated, Disabled. They can be used interchangeably/dynamically within another Form input component. Help text will display Disabled state when an input component it corresponds to is disabled.

Anatomy and Behavior

1. Icon - is an optional property of Help text. Only specified icons in Figma should be used for each corresponding type of Help Text.

2. Text - describes the help, validation result and optionally gives hints to solve failures in validation.

Gaps and Sizes

• Gap between icon and text: 2XS
  
• Icon padding: M
  
• Width: Fill container (min. width is 5XL)
  
• Height: Hug contents (element adapts to the contents’ height) and the maximum number of lines is 3.

INFO

For constraints and alignments check Inspect tool in Figma, in the right-hand panel.

Tokens

SCSS Variable

Value

$helpText-color

--color-grey-54

$helpText-color-invalid

--color-red-50

$helpText-color-validated

--color-green-50

$helpText-color-locked

--color-grey-80

$helpText-margin

--gutter-2xs

Properties

export type HelpTextCategory = "invalid" | "validated" | "info";

export interface HelpTextProps extends TooltipProps {
  text: string;
  category: HelpTextCategory;
  horizontal?: boolean;
  helpTextIcon?: boolean;
  disabled?: boolean;
  icon?: IconName;
}

Configurations

HelpText
Categories	No Icon	Icon	Disabled
Info	Help text goes here	Help text goes here	Help text goes here
Validated	Entry Validated	Entry Validated	-
Invalid	This field can not be empty. Please provide password or try 'Forget Password' option.	This field can not be empty. Please provide password or try 'Forget Password' option.	-

HelpText
Sizes	Info	Validated	Invalid
small	Help text goes here	Entry Validated	This field can not be empty
medium	Help text goes here	Entry Validated	This field can not be empty
big	Help text goes here	Entry Validated	This field can not be empty