Text field
Schema:
"root"}
:
{1 Items"fields"]
:
[1 Items0}
:
{2 Items"name"
:
string
"name"
"meta"}
:
{2 Items"displayName"
:
string
"Name"
"displayType"
:
string
"text_field"
Field properties
Properties used by this field (inside meta field in schema)
| Name | Description | Type |
|---|---|---|
| placeholder | The hint shown in the text field | String |
| isReadonly | A readonly field is not editable and value cannot be changed | Boolean |
| isDisabled | Shows the field as disabled. This is also not editable and value cannot be changed | Boolean |
| variant | Contains the field variant to be used. Allowed values: standard, filled, outlined. Default is standard. |
Common field properties
These are the common properties of a field ( inside meta field)
| Field | Data type | Default Value | Description |
|---|---|---|---|
| className | String | None | Pass classname for custom styling or reference |
| displayName | String | None | It is used to display name of the field in the form |
| displayType | String | None | It is used to determine the field type to be displayed. Supported options: |
| displayProps | Object | None | It is used for field layouting. Refer for details: DisplayType |
| htmlProps | Object | None | It is used for setting native html attributes to basic form controls like text_field, select, number, password, email etc. Example of such attributes would be like step, min, max for displayType number |
| value | String Boolean Number | None | It is value of the field |
| type | String | None | Used for hidden fields and field section. Value for hidden field: hidden. Value for section: section |
| validation | Object | For field validation | |
| dependencies | Object | Defines relationships and dependencies between various fields. Refer here for details: Dependencies | |
| events | Object | Defines field level events |
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 |
| infoDetail | Contains general info msg about the field |
| requiredDetail | Contains info msgs about the required validation property |
Field with placeholder
Schema:
"root"}
:
{1 Items"fields"]
:
[1 Items0}
:
{2 Items"name"
:
string
"name"
"meta"}
:
{3 Items"displayName"
:
string
"Name"
"displayType"
:
string
"text_field"
"placeholder"
:
string
"Enter your name"
Readonly field
Schema:
"root"}
:
{1 Items"fields"]
:
[1 Items0}
:
{2 Items"name"
:
string
"name"
"meta"}
:
{4 Items"displayName"
:
string
"Name"
"displayType"
:
string
"text_field"
"isReadonly"
:
bool
true
"value"
:
string
"Godzilla"
Disabled field
Schema:
"root"}
:
{1 Items"fields"]
:
[1 Items0}
:
{2 Items"name"
:
string
"name"
"meta"}
:
{4 Items"displayName"
:
string
"Name"
"displayType"
:
string
"text_field"
"isDisabled"
:
bool
true
"value"
:
string
"Godzilla"
Required field
Click on Submit with and without value.
Schema:
"root"}
:
{1 Items"fields"]
:
[1 Items0}
:
{2 Items"name"
:
string
"name"
"meta"}
:
{4 Items"displayName"
:
string
"Name"
"displayType"
:
string
"text_field"
"value"
:
string
""
"validation"}
:
{2 Items"required"
:
bool
true
"requiredDetail"
:
{…
}1 ItemsField with pattern
Only supports alphanumeric characters. Special characters are not supported.
Enter any special character (!@#$%^&*) and click on Submit.
Schema:
"root"}
:
{1 Items"fields"]
:
[1 Items0}
:
{2 Items"name"
:
string
"name"
"meta"}
:
{3 Items"displayName"
:
string
"Name"
"displayType"
:
string
"text_field"
"validation"}
:
{2 Items"pattern"
:
string
"^[a-zA-Z0-9]+$"
"patternDetail"
:
{…
}1 ItemsValidation with minimum and maximum characters
Try to enter more than 10 characters.
Schema:
"root"}
:
{1 Items"fields"]
:
[1 Items0}
:
{2 Items"name"
:
string
"name"
"meta"}
:
{3 Items"displayName"
:
string
"Name"
"displayType"
:
string
"text_field"
"validation"}
:
{2 Items"min"
:
int
5
"max"
:
int
10
Schema with info msg
Schema:
"root"}
:
{1 Items"fields"]
:
[1 Items0}
:
{2 Items"name"
:
string
"name"
"meta"}
:
{3 Items"displayName"
:
string
"Name"
"displayType"
:
string
"text_field"
"validation"}
:
{1 Items"info_detail"
:
{…
}1 Items