Text input
The following examples will show a input is defined in the json
It renders a text input for the user, the type can be any type provided by the HTML5 specification. We can specify a label and a placeholder. The inline property can tell if the label should be placed on the same line of the input or above it. By default the input is inline: true. We can specify if the input should displays a symbol. The symbol is not required. The symbol is visually placed at the end of the input. If we need a symbol placed at the start of the input, we can specify it with the preSymbol property. The preSymbol is the same as the symbol but placed at the start of the input. The symbol and preSymbol can both be defined. The value will be a string.
{
"component": "text",
"type": "text",
"label": "Name",
"placeholder": "Enter your name",
"inline": "true",
"symbol": "@"
}
Specific size
We can force the size of the input with the inputOptions property. The size can be any valid css size. The size is not required, but if it is not set, it will be 100% by default
{
"component": "text",
"type": "text",
"label": "Name with defined size",
"placeholder": "Enter your name",
"inputOptions": {
"size": "75%"
}
}
Format data visually
It renders a input that will visually format the value as the provided format. The value will be of the type defined by the properties, so if nothing is specified, it will be a string, if type: number is specified, the value will be a number (or a float depending on the format specified). The format should contain a string with the following characters: X. The X will be replaced by the value. The X can be repeated as many times as we want.
{
"label": "Only 2 digits after comma",
"component": "text",
"type": "number",
"format": ".XX"
},
In this case the input with a value of 0.92384492402 (as number) will show 0.92
{
"label": "Only 4 digits after comma",
"component": "text",
"type": "number",
"format": ".XXXX"
}
In this case the input with a value of 0.92384492402 (as number) will show 0.9238
{
"label": "Phone number",
"component": "text",
"preSymbol": "+32",
"format": "XXX XX XX XX"
}
The format here will display the input 474123456 as 474 12 34 56, but the value will be 474123456 as a string