Field Help Text

Overview

Help text is pertinent information that assists the user in inputting data. Help text is always available when the input is focused and appears underneath it. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.

When to use

• Help Text is not compulsory but should be used to assist the user to input data in a field with very specific requirements. Help text assists the user to input data which will more likely pass validation rules.

When not to use

• Do not use Help Text in lieu of the Placeholder or Label.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Field Help Text

Please enter some helpful content

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Id

string

Required

The id of the input field related to the validation.

 

Value

string

Array<string>

The text to display.

Value 

Multiline message

Length is never an issue with this helper. Your message can be as long as you need. Note: Error messages wrap

Label (optional)

Length is never an issue with this helper. Your message can be as long as you need and wraps to the size of the field it is attached to.

Multiple messages

The message also supports arrays of values and can present them neatly to the user.

Label (optional)

1. The first thing you need to do is look left
2. Then look right
3. Then look all around you

You can find the component in our MedKit Figma library.