Greggs

Input Number (Decimal Number) (optional)This is a number field with decimal number validation. The input must be a whole number or decimal number. ID - input-number-decimal-number

Input Number (Whole Number) (optional)This is a number field with whole number validation. The input must be a whole number, does not accept decimal number. ID - input-number-whole-number

Input Number (Max Number) (optional)This is a number field with max number validation. The input must be a 5 or less, does not accept anything over 5. ID - input-number-max-number

Input Number (Min Number) (optional)This is a number field with min number validation. The input must be a 5 or more, does not accept anything less than 5. ID - input-number-min-number

Input Number (Max Length) (optional)This is a number field with max length validation. The input must be a 5 characters or less. ID - input-number-max-length

Input Number (Min Length) (optional)This is a number field with min length validation. The input must be a 5 characters or more. ID - input-number-min-length

Input Number (Required) This is a number field which includes required validation. ID - input-number-required

Input type - Text

These input fields are type text, there is a validation rule on each input for testing.

Input Text (Decimal Number) (optional)This is a text field with decimal number validation. The input must be a whole number or decimal number. ID - input-text-decimal-number

Input Text (Whole Number) (optional)This is a text field with whole number validation. The input must be a whole number, does not accept decimal number. ID - input-text-whole-number

Input Text (Max Number) (optional)This is a text field with max number validation. The input must be a 5 or less, does not accept anything over 5. ID - input-text-max-number

Input Text (Max Length) (optional)This is a text field with max length validation. The input must be a 5 characters or less. ID - input-text-max-length

Input Text (Min Length) (optional)This is a text field with min length validation. The input must be a 5 characters or more. ID - input-text-min-length

Input Text (Required) This is a text field which includes required validation. ID - input-text-required

Input Text (Email) (optional)This is a text field which includes email validation. ID - input-text-email

Input type - Email

These input fields are type email, there is a validation rule on each input for testing.

Input Email (Email) (optional)This is a email field with email validation. ID - input-email-validation-email

Input Email (Required) This is a email field with required validation. ID - input-email-validation-required

Input type - Text Area

This section includes text area fields

Input Text Area (Decimal Number) (optional)This is a text area field which includes decimal number validation. ID - input-text-area-decimal-number

Input Text Area (Whole Number) (optional)This is a text area field with whole number validation. The input must be a whole number, does not accept decimal number. ID - input-text-area-whole-number

Input Text Area (Max Number) (optional)This is a text area field with max number validation. The input must be a 5 or less, does not accept anything over 5. ID - input-text-area-max-number

Input Text Area (Max Length) (optional)This is a text area field with max length validation. The input must be a 5 characters or less. ID - input-text-area-max-length

Input Text Area (Min Length) (optional)This is a text area field with min length validation. The input must be a 5 characters or more. ID - input-text-area-min-length

Input Text Area (Required) This is a text area field which includes required validation. ID - input-text-area-required

Input Text Area (Email) (optional)This is a text area field which includes email validation. ID - input-text-area-email

Input type - Phone Number

This section includes phone number input

Input Phone Number (Max Length) (optional)This is a phone number field which includes max length validation. ID - input-phone-number-max-length

Input Phone Number (min Length) (optional)This is a phone number field which includes min length validation. ID - input-phone-number-min-length

Input Phone Number (Required) This is a phone number field which includes required validation. ID - input-phone-number-required

Input type - Rating

This is the rating component which uses rive for the faces to have animations

Rating (Numbers) - Required This is the rating input with numbers with required validation - ID - input-rating-required

Rating (Faces) - Required This is the rating input with faces with required validation - ID - input-rating-required

Input type - Address

This is the address component which uses google api to retrieve the address. Only validation available is required field.

Enter your address (Required)This is the address input with required validation - ID - input-address-required Enter address manually

Input type - Date

This is the date component.

Input Date (Required) This is a date field which includes required validation ID - input-date-required

Input Date - Date from and Date to (optional)This is a input date with a date from and a date to that can be selected. From 1/1/2026 - 31/12/2026 - input-date-date-restrictions

Input type - File Upload

This is the file upload component.

Input file - Max File Size (optional)This is a input file upload which has a max file size of 100mb. Images, Audio, Video, PDFs and word documents are allowed. ID - input-file-upload-max-file-size Choose file No files chosen

Input file - Required This is a input file upload which is required. Images, Audio, Video, PDFs and word documents are allowed. ID - input-file-upload-required Choose file No files chosen

Input type - Select

This is the select component which includes single select and multiple select.

Input Multi Select - Required

This is a select input that allows multiple selections with required validation - ID - input-multi-select-required

Option 1Option 2Option 3

Input Single Select - Required

This is a select input that allows single selection with required validation - ID - input-single-select-required