Multitext

A textbox that take multiple text input and renders the value as chip.

Schema

[
    {
        "name": "calendar-months",
        "meta": {
            "displayName": "Calendar Months in a Year",
            "displayType": "multitext",
            "placeholder": "Enter months",
            "description": "enter months in a calendar year",
            "readOnly": false,
            "htmlProps": {
                "allowDynamic": false
            },
            "validation": {
                "required": true,
                "requiredDetail": {
                    "errorMsg": "custom message for required detail"
                }
            }
        }
    }
]

Example

Calendar Months in a Year

​

enter months in a calendar year

---

---

Form Data:

{}

required is set true

[
    {
        "name": "calendar-months",
        "meta": {
            "displayName": "Calendar Months in a Year",
            "displayType": "multitext",
            "placeholder": "Enter months",
            "description": "enter months in a calendar year",
            "validation": {
                "required": true,
                "requiredDetail": {
                    "errorMsg": "custom message for required detail"
                }
            }
        }
    }
]

value is a passed by default

[
    {
        "name": "calendar-months",
        "meta": {
            "displayName": "Calendar Months in a Year",
            "displayType": "multitext",
            "placeholder": "Enter months",
            "description": "enter months in a calendar year",
            "value": ["january", "february", "march"],
            "validation": {
                "required": true
            }
        }
    }
]

Field Properties

Name	Description	Type
name	The unique identifier for the multitext control instance.	string
meta	An object containing the configuration and data for the control.	object
displayName	The display name of the control.	string
displayType	The type of control, which is "multitext" in this case.	string
placeholder	The placeholder text for the input field.	string
description	A string providing additional information or instructions about the control.	string
validation	An object for validation rules.	object
required	A boolean indicating if the control is required.	boolean
htmlProps	A native object that has all the props of the mui component	object
readOnly	A readonly field is not editable and value cannot be changed	boolean
value	value is the content that render in the input component	string[]

Field Properties - Validation Details

The validation settings within the Textarea component are crucial for ensuring that user input meets specific requirements. Here’s a breakdown of the available validation properties:

Property	Description
required	Boolean value that specifies whether entering data into the field is mandatory.
minLength	Specifies the minimum number of characters allowed in the input.
maxLength	Specifies the maximum number of characters allowed in the input.
min	Specifies the minimum value allowed for number inputs, with support for dynamic values.
max	Specifies the maximum value allowed for number inputs, also supporting dynamic conditions.
pattern	A regex pattern that the input must match to be considered valid.
validate	A function for custom validation logic, which can return a boolean or an error message.
requiredDetail	Contains info msgs about the required validation property

Example Usage of Validation Properties

{
    "name": "comments",
    "meta": {
        "displayName": "Comments",
        "displayType": "textarea",
        "validation": {
            "required": true,
            "minLength": 10,
            "maxLength": 300,
            "min": 10,
            "max": 300,
            "pattern": "/^[a-zA-Z0-9 .,'-]+$/"
        },
        "htmlProps": {
            "minRows": 3,
            "maxRows": 6
        }
    }
}