Number field
Display type
- number
Basic example
Schema:
{}
fields]
:
[0}
:
{name
:
"age"
meta}
:
{displayName
:
"Age"
displayType
:
"number"
Properties
| 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 |
Max. allowed number
Enter an age greater than 100 years and click on Submit.
Schema:
{}
fields]
:
[0}
:
{name
:
"age"
meta}
:
{displayName
:
"Age"
displayType
:
"number"
validation}
:
{max
:
100
Placeholder
Schema:
{}
fields]
:
[0}
:
{name
:
"age"
meta}
:
{displayName
:
"Age"
displayType
:
"number"
placeholder
:
"Enter your age"