Number

The Number component can be used in any form to provide a numeric input field. It can be configured to be readonly, disabled, required, and can have a placeholder, helper text, and default value.

Schema

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "placeholder": "Enter your age",
            "description": "Age will be used for account purposes",
            "readOnly": false,
            "validation": {
                "required": true,
                "min": 10,
                "max": 300
            },
            "htmlProps": {
                "allowDynamic": true
            }
        }
    }
]

Example

Age

​

Age will be used for account purposes

---

---

Form Data:

{}

Field properties

Properties used by this field (inside meta field in schema)

Name	Description	Type
displayName	The label shown above the number field	string
displayName	The label shown above the number field	string
displayType	The type of the field to be displayed	string
placeholder	The hint shown in the number field	string
readOnly	A readonly field is not editable and value cannot be changed	boolean
isDisabled	A disabled field is not editable and value cannot be changed	boolean
required	Indicates whether the field is mandatory	boolean
pattern	A regex pattern that the field value must match	string
min	Minimum value for the field	number
max	Maximum value for the field	number
description	Helper text or additional description shown below the number field	string
value	The default value of the field	number
overrideDynamicSupport	To override the default behavior of showing static and dynamic options	boolean

Example JSON

Placeholder

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "placeholder": "Enter your age"
        }
    }
]

Readonly

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "readOnly": true,
            "value": 30
        }
    }
]

Disabled

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "isDisabled": true,
            "value": 30
        }
    }
]

Required

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "validation": {
                "required": true
            }
        }
    }
]

Pattern

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "validation": {
                "pattern": "/^\\d+$/"
            }
        }
    }
]

Min and Max Length Validation

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "validation": {
                "min": 18,
                "max": 100
            }
        }
    }
]

Helper Text

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "description": "Enter your age carefully"
        }
    }
]

Override dynamic support

[
    {
        "name": "age",
        "meta": {
            "displayName": "Age",
            "displayType": "number",
            "description": "Enter your age carefully",
            "htmlProps": {
                "overrideDynamicSupport": true
            }
        }
    }
]

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.

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,
            "overrideDynamicSupport": true
        }
    }
}