An Input element provides a user-editable text field with customizable text style, hint appearance, sizing, spacing, and validation options such as required fields and maximum character limits.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Name | String | {name} | Name identifier for the input field. |
| Enable | Boolean | true | Determines whether the input is active or disabled. |
| Require | Boolean | false | If true, the field must be filled before form submission. |
| Text | String | {text} | Default text value inside the input. |
| Text.Color | Color | {textColor} | Color of the typed text. |
| Text.Style | TextStyle | {textStyle} | Style of the typed text (bold, italic, etc.). |
| Text.Size | Number | 16 | Font size of the input text. |
| Hint | String | {hint} | Placeholder text displayed when the field is empty. |
| Hint.Color | Color | {hintColor} | Color of the hint text. |
| Hint.Style | TextStyle | {hintStyle} | Style of the hint text. |
| Size | Number | 0 | Input field height. |
| Margin | Number | 20 | Outer spacing around the input. |
| MarginLine | Number | 10 | Vertical spacing between this and other elements. |
| Max | Number | 1000 | Maximum allowed character length. |
Coding:
{
"@Type": "Input",
"Name": "{name}",
"Enable": true,
"Require": false,
"Text": "{text}",
"Text.Color": "{textColor}",
"Text.Style": "{textStyle}",
"Text.Size": 16,
"Hint": "{hint}",
"Hint.Color": "{hintColor}",
"Hint.Style": "{hintStyle}",
"Size": 0,
"Margin": 20,
"MarginLine": 10,
"Max": 1000
}To see how to create this element in Applin Studio (no-code mode), visit:
Design the Input in Applin Studio