Select

The select field is used to display a dropdown in the form.

Schema

[
    {
        "name": "country",
        "meta": {
            "displayType": "select",
            "displayName": "Country",
            "placeholder": "Select a country",
            "validation": {
                "required": true,
                "requiredDetail": { "errorMsg": "Country is a required field" }
            },
            "readOnly": false,
            "options": [
                {
                    "value": "india",
                    "label": "India"
                },
                {
                    "value": "usa",
                    "label": "USA"
                }
            ],
            "htmlProps": {
                "allowDynamic": true
            }
        },
        "prop": "personalInfo"
    }
]

Example

Country

Select a country

​

---

---

Form Data:

{}

props

meta object

The meta object contains properties that define the display characteristics and behavior of the section.

Name	Description	Type
displayName	The name to display as the section header	string
description	A description text to display under the header	string
displayProps	Additional properties to control display settings	object
validation	Validation rules for the section	object
options	The options to display in the dropdown	array
dependencies	Conditions that must be met for the section to be displayed	object
value	The default value for the select field	string
isDisabled	Whether the field is disabled	boolean
readOnly	A readonly field is not editable and value cannot be changed	boolean
className	Additional CSS class names to apply to the section	string

Common Validation Properties

Field	Description
required	Marks a field as mandatory
pattern	Adds a pattern validation for the field. For email, pattern is supported by default
patternDetail	Contains info msg and error msg for pattern validation property
min	For Textbox fields, it is the minimum number of characters required for the field. For number fields, it is the minimum value allowed
max	For Textbox fields, it is the maximum number of characters allowed. For number fields, it is the maximum value allowed
minDetail	Contains error and info msg for min validation property
maxDetail	Contains error and info msg for max validation property
requiredDetail	Contains info msgs about the required validation property

Example JSON

Select with options

[
    {
        "name": "country",
        "meta": {
            "displayName": "Country",
            "displayType": "select",
            "validation": {
                "required": true,
                "requiredDetail": { "errorMsg": "Country field is a required field" }
            },
            "options": [
                {
                    "value": "india",
                    "label": "India"
                },
                {
                    "value": "usa",
                    "label": "USA"
                }
            ]
        },
        "prop": ""
    }
]

Select with default value

[
    {
        "name": "country",
        "meta": {
            "displayType": "select",
            "placeholder": "Select a country",
            "value": "india",
            "validation": {
                "required": true
            },
            "options": [
                {
                    "value": "india",
                    "label": "India"
                },
                {
                    "value": "usa",
                    "label": "USA"
                }
            ]
        },
        "prop": "personalInfo"
    }
]

Select with disabled state

[
    {
        "name": "country",
        "meta": {
            "displayName": "Country",
            "displayType": "select",
            "validation": {
                "required": true,
                "requiredDetail": { "errorMsg": "Country field is a required field" }
            },
            "options": [
                {
                    "value": "india",
                    "label": "India"
                },
                {
                    "value": "usa",
                    "label": "USA"
                }
            ],
            "isDisabled": true
        },
        "prop": ""
    }
]

Select with dependencies

[
    {
        "name": "country",
        "meta": {
            "displayName": "Country",
            "displayType": "select",
            "displayProps": {
                "loading": true
            },
            "validation": {
                "required": true,
                "requiredDetail": { "errorMsg": "Country field is a required field" }
            },
            "options": [
                {
                    "value": "india",
                    "label": "India"
                },
                {
                    "value": "usa",
                    "label": "USA"
                }
            ],
            "dependencies": {
                "conditions": [
                    {
                        "field": "name",
                        "operator": "NOT_EMPTY"
                    }
                ]
            }
        },
        "prop": ""
    }
]

Select with loading state

[
    {
        "name": "country",
        "meta": {
            "displayName": "Country",
            "displayType": "select",
            "displayProps": {
                "loading": true
            },
            "validation": {
                "required": true,
                "requiredDetail": { "errorMsg": "Country field is a required field" }
            },
            "options": [
                {
                    "value": "india",
                    "label": "India"
                },
                {
                    "value": "usa",
                    "label": "USA"
                }
            ]
        },
        "prop": ""
    }
]