Text

The Text component can be used in any form to provide a text field for single-line inputs. It can be configured to be readonly, disabled, required, and can have a placeholder, helper text, and default value.

Configuration Schema

The JSON schema defines the structure for the Text component, outlining options for customization:

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

Examples

Name



Name 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 text field	string
displayType	The type of the field to be displayed	string
placeholder	The hint shown in the text field	string
readOnly	Indicates whether the field is editable; a readonly field's value cannot be changed	boolean
isDisabled	Indicates whether the field is editable; a disabled field's 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 length for the field value	number
max	Maximum length for the field value	number
description	Helper text or additional description shown below the text field	string
value	The default value of the field	string
allowDynamic	Enables static and dynamic input capabilities, allowing user interactions and data injection	boolean

Validation Configurations

The validation object within the meta field allows for defining constraints such as minimum and maximum lengths, required status, and custom patterns to ensure the input meets specific standards.

[
    {
        "name": "name",
        "meta": {
            "displayName": "Name",
            "displayType": "text",
            "description": "Enter your name carefully",
            "validation": {
                "required": true,
                "min": 3,
                "max": 10,
                "pattern": "/^[a-zA-Z]+$/"
            }
        }
    }
]