HelpText

Molecule

Usage

It is used to hint users with the corresponding input field such as to the 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. Usually, but not always, used within another input component in Forms, such as Text Input, Select or similar. 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.

Playground

Icon

noneadd_home_workadd_layeradd_linkadd_useraialertangleapplyappsapps_arrowarrows_outwardattachmentattic_wallavataraxesbackbugcalendarcheckcheck_filledchecklistchevron_downchevron_leftchevron_rightchevron_upcircleclosecloud_uploadcollapsecolumnsconstructioncoordinatescubecube_groupcustom_geometrydoordouble_chevron_downdouble_chevron_leftdouble_chevron_rightdouble_chevron_updownloaddownwardduplicatedusterdwgeditelement_core_layerelement_inside_layerelement_insulationelement_outside_layererrorexcelexpand_1expand_2export_fileseyeeye_hiddenfibernox_logofibernox_no_tipfilefilterfilter_dropdownfilter_dropdown_messagefilter_removefolderforwardgearhelphidden_layerhomehome_workimage_arrow_upinfojva_fjva_nlanguagelayerlayoutlink_offlistlistsloadslockedloginlogoutmailmenuminusmore_optionsmultiple_layersnew_tabno_split_scenenotificationnotification_updateopeningoutputpluspohlcon_logopreviewquestionrectangleredoreloadremove_userrowsrulersandwich_core_layersandwich_insulationsandwich_outside_layersavescreen_with_appsscreen_with_downloadscreen_with_gearscreen_with_webscrollsearchsearch_layersearch_usersendsloped_side_wall_leftsloped_side_wall_rightsplit_scenestandard_wallstar_shinestar_usersumswatchswatch_alertsyncticktrashundounlockeduploadupwarduservillavilla_addvilla_infowindowzoom_inzoom_out

Text

Categories

ValidatedInfoInvalidWarning

Info

Disabled

Show Icon

This field can not be empty. Please provide password or try Forget Password option.

        
          

            <
            HelpText

            





            

                category
              
                =
                "info"
              

                text
              
                =
                "This field can not be empty. Please provide password or try Forget Password option."
              

                helpTextIcon
              



  />

Anatomy

• Container - simply the container.
• Icon - optional for explaining the message.
• Text - describes the help, validation result and optionally gives hints to solve failures in validation.

States

• Default, Invalid, Warning, Validated, and Locked

Properties

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

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