Email

The Email component can be used to collect email addresses from users. It is a text field that validates the input against a regular expression pattern to ensure that the input is a valid email address or not. It can be configured to be readonly, disabled, required, and can have a placeholder, helper text, and default value.

Schema

[
    {
        "name": "email",
        "meta": {
            "displayName": "Email",
            "displayType": "email",
            "placeholder": "Enter your email",
            "description": "Email will be used for account purposes",
            "validation": {
                "required": true
            },
            "readOnly": false
        }
    }
]

Example

Email

​

Email 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	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
description	Helper text or additional description shown below the text field	string
value	The default value of the field	string
overrideDynamicSupport	To override the default behavior of showing static and dynamic options	boolean

Example JSON

Placeholder

[
    {
        "name": "name",
        "meta": {
            "displayName": "Name",
            "displayType": "text_field",
            "placeholder": "Enter your name"
        }
    }
]

Readonly

[
    {
        "name": "name",
        "meta": {
            "displayName": "Name",
            "displayType": "text_field",
            "readOnly": true,
            "value": "Ahmed"
        }
    }
]

Disabled

[
    {
        "name": "email",
        "meta": {
            "displayName": "Email",
            "displayType": "email",
            "isDisabled": true,
            "value": "[email protected]"
        }
    }
]

Required

[
    {
        "name": "email",
        "meta": {
            "displayName": "Email",
            "displayType": "email",
            "validation": {
                "required": true
            }
        }
    }
]

Pattern

[
    {
        "name": "email",
        "meta": {
            "displayName": "Email",
            "displayType": "email",
            "validation": {
                "pattern": "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/"
            }
        }
    }
]

Helper Text

[
    {
        "name": "email",
        "meta": {
            "displayName": "Email",
            "displayType": "email",
            "description": "Enter your email"
        }
    }
]

Override dynamic support

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