Text field
Display type
- text
- text_field
Basic example
Schema:
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Name"
displayType
:
"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. Read more |
| displayProps | Object | None | It is used for field layouting. Refer for details: Display props |
| 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 |
Field with placeholder
Schema:
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Name"
displayType
:
"text_field"
placeholder
:
"Enter your name"
Readonly field
Schema:
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Name"
displayType
:
"text_field"
isReadonly
:
true
value
:
"Godzilla"
Disabled field
Schema:
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Name"
displayType
:
"text_field"
isDisabled
:
true
value
:
"Godzilla"
Required field
Click on Submit with and without value.
Schema:
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Name"
displayType
:
"text_field"
value
:
""
validation}
:
{required
:
{…
}Field with pattern
Only supports alphanumeric characters. Special characters are not supported.
Enter any special character (!@#$%^&*) and click on Submit.
Schema:
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Name"
displayType
:
"text_field"
validation}
:
{pattern
:
{…
}Validation with minimum and maximum characters
Try to enter more than 10 characters.
Schema:
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Name"
displayType
:
"text_field"
validation}
:
{min
:
5
max
:
10
Schema with info msg
Schema:
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Name"
displayType
:
"text_field"
validation}
:
{info
:
"Enter your first and last name"