Form Subcomponent: Postal Code Field

The Postal Code Field subcomponent can only be used within the Form component..

The Postal Code Field subcomponent allows for collection of a customers postal code, which can be used to store or update the postal code in their billing address. It can be used as part of an acquisition flow, or within self-service.

The key difference between this standalone postal code field and the Address Fields subcomponent Code Field support the use of built in, country specific, validation rules.

Screenshot 2023-10-26 at 12.14.16.png

Built in Validation

If no no regex is specified in the Validation regular expression and Disable standard validation rules is toggle off, then this component will utilise the country specific regex rules.

Screenshot 2023-10-25 at 13.49.52.png

The country specific regex rules are pulled from Limio's address metadata file, and allows for stricter validation on this field. The table below explains in detail the regex patterns in the address metadata.

Regex patterns included:

Country	Pattern	Matches	Example matches
Australia, India, New Zealand	\d{4}	exactly four digits in a row	1234
Brazil	\\d{5}-?\\d{3}	five-digit number, followed by an optional hyphen, and then three more digits	12345, 12345-678
Canada	[ABCEGHJKLMNPRSTVXY]\\d[ABCEGHJ-NPRSTV-Z] ?\\d[ABCEGHJ-NPRSTV-Z]\\d	Canadian post code format	a1a 1a1, K1A 0B1
Great Britain	(?:AB|AL|B|BA|BB|BD|BF|BH|BL|BN|BR|BS|BT|BX|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(?:\\d[\\dA-Z]? ?\\d[ABD-HJLN-UW-Z]{2}))|BFPO ?\\d{1,4}	the various formats of UK postal codes, including Gibraltar and military addresses (BFPO)	EC1A 1BB, GIR 0AA, BFPO 1234
Italy, Mexico, Malaysia	\d{5}	exactly five digits in a row	12345
Japan	\d{3}-?\\d{4}	three digits, an optional hyphen, and then four digits	123-4567, 2433844
United States	(\\d{5})(?:[ \\-](\\d{4}))	matches both standard ZIP codes and ZIP+4 codes in the US.	12345, 1245-6789
All other countries	[A-Z0-9][A-Z0-9\- ]*[A-Z0-9]	a mixture of any number, letter with hyphens and spaces allowed in between	123-6G7, 45 THJ

Component Props

Prop Name	Label	Type	Required	Default Value	Description
name	Name	boolean	✅	billingDetails.postalCode	This determines how the field is sent on the order payload.
label	Label	string	✅	{{zip_name_type}}	This is the field label visible to to the customer. If "{{zip_name_type}}' is used, the label will be dynamic dependent on country selected.
toolTipMessage	Tooltip message	string		""	If a value is entered here, a tooltip will appear next to this field, with the value in the message.
hidden	Hidden	boolean		false	Determines whether the field is visible to the user or not.
disabled	Disabled	boolean		false	Determines whether the user can type in this field or not.
required	Required	boolean		false	Determines whether the this field is required or not.
regex	Validation regular expression	string		""	A regular expression pattern that the input value must match
invalidMessage	Invalid message	string		""	The error message to display when the input value is invalid, if the field is required.
col	Column Size	number		12	Sets the width of the input. Ranging from 1 - 6 where 6 is the max.
fieldClassName	Class Name	string		""	A class name can be added, if extra styling is needed which should target this subcomponent.
disableBuiltinValidation	Disable standard validation rules	boolean		false	Set to true, if you do not wish to utilise the country specific regex rules.

Known Limitations:

Currently this component is only used to store/amend the billing details, and does not yet support the delivery details.