Password

The Password component is a text box where characters inside the box are hidden from the user. It has similar properties to the Text component, including configuration options for being readonly, disabled, required, and supporting placeholder, helper text, and default value.

Schema

[
    {
        "name": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "placeholder": "Enter your password",
            "readOnly": false,
            "description": "Password will be used for account security",
            "validation": {
                "required": true,
                "min": 8,
                "max": 20
            }
        }
    }
]

Example

Password

​

Password will be used for account security

---

---

Form Data:

{}

Field properties

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

Name	Description	Type
displayName	The label shown above the password field	string
displayType	The type of the field to be displayed	string
placeholder	The hint shown in the password 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 length for the password	number
max	Maximum length for the password	number
description	Helper text or additional description shown below the password 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": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "placeholder": "Enter your password"
        }
    }
]

Readonly

[
    {
        "name": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "readOnly": true,
            "value": "password123"
        }
    }
]

Disabled

[
    {
        "name": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "isDisabled": true,
            "value": "password123"
        }
    }
]

Required

[
    {
        "name": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "validation": {
                "required": true
            }
        }
    }
]

Pattern

[
    {
        "name": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "validation": {
                // regex pattern for a strong password
                "pattern": "/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{8,20}$/"
            }
        }
    }
]

Min and Max Length Validation

[
    {
        "name": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "validation": {
                "min": 8,
                "max": 20
            }
        }
    }
]

Helper Text

[
    {
        "name": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "description": "Enter a strong password"
        }
    }
]

Override dynamic support

[
    {
        "name": "password",
        "meta": {
            "displayName": "Password",
            "displayType": "password",
            "description": "Enter your password",
            "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": "password",
    "meta": {
        "displayName": "Password",
        "displayType": "password",
        "validation": {
            "required": true,
            "minLength": 10,
            "maxLength": 300,
            "min": 10,
            "max": 300,
            "pattern": "/^[a-zA-Z0-9 .,'-]+$/"
        },
        "htmlProps": {
            "minRows": 3,
            "maxRows": 6
        }
    }
}