Form Subcomponent: Field

The Field component is a versatile input subcomponent that supports various input types, such as text, date, email, phone number, dropdown list, checkboxes, and radio buttons.

Note: The Field subcomponent can only be used within the Form component. 

An example of the differently configured Field subcomponents.

Properties available differ for each input type:

Prop ID	Prop Label	Type	Default Value	Info	Type available for
name	Limio field name	string	customerDetails.newField	This field name can be renamed as needed. It will be passed onto the order object	All types
label	Label	string	Input	The label text for the field	All types
type	Type	string	picklist	Options: Input, Date, Number, Email Address, Textarea, Phone number, Dropdown, Radio buttons, Checkbox	All types
col	Column Size	number	6	Sets the width of the input. Ranging from 1 - 6 where 6 is the max	All types
required	Required	boolean	false	Determines whether the field is required or not	All types
invalidMessage	Invalid message	string	This field is required	The error message to display when the input value is invalid	All types
disabled	Disabled	boolean	false	Determines whether the field is disabled or not	All types
minlength	Minimum length	string	""	The minimum length of the input value	input
maxlength	Maximum length	string	""	The maximum length of the input value	input
regex	Validation regular expression	string	""	A regular expression pattern that the input value must match	input
selectOptions	Options	value: string id: string	"value":"", "id":"option1" "value":"Here is one option", "id":"option2" "value":"Here is another option", "id":"option3" "value":"And here is one more option", "id":"option4"		select (dropdown)
phoneNumberPicklist	Phone Number Picklist	boolean	false	Shows a dropdown country selector for the phone field	phone
maxDaysFuture	Max days in future	number		Controls how many days in the future appear on the date picker	date
minDaysFuture	Min days in future	number		Controls the minimum number of days in the future that will appear in the date picker	date

Limio field name:

The Limio field name value must be unique. It drives field pre-population and populates data in the order payloads.

Validation regular expression:

You may want to refuse some characters (e.g. numbers or special characters), in certain input fields. To circumvent that, you can create regex of the characters you want to allow. In order for this feature to work, the fields must be marked as required.

Two important things to note when entering your regex:

1. The regex should be written without backslashes at the start and end
   
2. Any backslashes must be appended with an extra backslash
   e.g /^[a-zA-ZÀ-ÿ'\s\-]+$/ should become ^[a-zA-ZÀ-ÿ'\\s\\-]+$ 

To test you Regex Charset, you can go to https://regexr.com/. If you need some context about Regex Charset, this is a good resource https://www.regular-expressions.info/charclass.html. If you have issues with your Regex Character, please raise a ticket via the help desk.