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 Name	Label	Type	Default Value	Description	Applicable Types
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.

You can also create custom fields in your Limio Modular Checkout form that populate corresponding custom fields in the Zuora Subscription object. This allows you to pass user-entered form data directly into Zuora without any additional configuration or middleware.

What is this feature?

This enhancement lets you capture custom input in a Field subcomponent (for example, salespersonName__c) and map that directly to a custom field in the Zuora Subscription object with the same API name (salespersonName__c).

How do I use it?

1. In the Modular Checkout Form component, add a new Field with Limio field name set as customFields.salespersonName__c.

2. In Zuora, create a custom field on the Subscription object named salespersonName__c (i.e. remove customFields.)

3. (Optional) Resync your Zuora catalogue in Limio to ensure all fields are available.

Once set up, any values entered into the field during checkout will:

• Appear in the Limio order and event payload

• Be sent in the Zuora Subscription

Limitations

• This currently only works with custom fields on the Zuora Subscription object.

• You cannot use this method to set custom fields on Account or Order objects in Zuora.

You can also populate custom fields via the Limio Catalogue data. Learn more at:

How to populate custom fields in Zuora

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:

   /^\[a-zA-ZÀ-ÿ'\s\\-]+$/ should become **^\[a-zA-ZÀ-ÿ'\\\s\\\\-]+$** 

To test you Regex Charset, you can go to . If you need some context about Regex Charset, this is a good resource . If you have issues with your Regex Character, please raise a ticket via the help desk.