Input properties

Usage

{
    type: "input",
    name?: string,
    id?: string,
    value?: string | number,
    numberMask?:
        | {
                prefix?: string; // "" by default (before the value)
                suffix?: string; // "" by default (after the value)
                groupSeparator?: string; // "," by default
                decSeparator?: string; // "." by default
                allowNegative?: boolean; // true by default
                maxIntLength?: number; // 16 by default (for the number type)
                maxDecLength?: number; // 2 by default (for the number type)
                minDecLength?: number; // 0 by default
            }
        | boolean,
    patternMask?:
        |   {
                pattern: ((value: string | number) => string) | string;
                charFormat?: {
                    [char: string]: RegExp;
                };
            }
        | string,
    
    css?: string,
    disabled?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean, // false by default
    padding?: string | number, 
    required?: boolean, // false by default
    validation?: string | (input: string | number) => boolean,
    width?: string | number | "content", // "content" by default

    autocomplete?: boolean, // false by default
    icon?: string,
    inputType?: "text" | "password" | "number", // "text" by default
    max?: number | string,
    maxlength?: number | string,
    min?: number | string,
    minlength?: number | string,
    placeholder?: string,
    readOnly?: boolean, // false by default

    hiddenLabel?: boolean, // false by default
    label?: string,
    labelPosition?: "left" | "top", // "top" by default
    labelWidth?: string | number,

    helpMessage?: string,
    preMessage?: string,
    successMessage?: string,
    errorMessage?: string,
}

Description

type	(required) the type of a control, set it to "input"
name	(optional) the name of a control
id	(optional) the id of a control, auto-generated if not set
value	(optional) the initial value of the input
numberMask	(optional) sets an input mask for entering number values. Can be set in two ways: as an object with the following properties: - prefix - renders a text before the resulting value - suffix - renders a text after the resulting value - groupSeparator - sets a separator for thousands - decSeparator - sets a separator for decimals - allowNegative - allows using negative numbers - maxIntLength - allows setting the maximal length of an integer - maxDecLength - allows setting the maximal length of a decimal - minDecLength - allows setting the minimal rendered length of a decimal as a boolean value converts the number value displayed in the input field into one of the predefined templates (uses the default numberMask config object depending on the specified input type)
patternMask	(optional) sets an input mask for entering number and string values according to a special pattern. Can be set in two ways: as an object with the following properties: - pattern - (function | string) allows specifying the necessary mask and change it dynamically, depending on the entered values. Can be set as: a function that takes as a parameter an entered value specified as a string or as a number and returns a string with a pattern mask a string with a pattern mask - charFormat - (object) allows specifying a regular expression for an optional symbol. It is set as an object with key:value pairs, where the key is a symbol and the value is a regular expression as a string allows setting a mask as a string using a predefined set of symbols
css	(optional) adds style classes to a control
disabled	(optional) defines whether a control is enabled (false) or disabled (true), false by default
height	(optional) the height of a control, "content" by default
hidden	(optional) makes an input hidden, false by default
padding	(optional) sets padding between a cell and a border of the Input control
required	(optional) defines whether a control is required, false by default
validation	(optional) the rule of input validation. Can be set in two ways: as a predefined string value: - "email" - validEmail - "integer" - validInteger - "numeric" - validNumeric - "alphanumeric" - validAplhaNumeric - "IPv4" - validIPv4 Can be used with inputType: "text", "password". as a function that defines a custom validation rule. It takes as a parameter the value typed in the input and returns true, if the entered value is valid. Can be used with inputType: "number" only.
width	(optional) the width of a control, "content" by default
autocomplete	(optional) enables/disables the autocomplete functionality of the input, false by default
icon	(optional) the CSS class name of an icon from the used icon font
inputType	(optional) sets the type of an input: "text", "password", "number". Using the "number" type for the input sets the type of the value attribute to "number". Use the "password" value to specify a field for entering a password. "text" by default
max	(optional) the maximal value allowed in the input. The attribute works only with the input type: "number".
maxlength	(optional) the maximum number of characters allowed in the input. The attribute works with the following input types: "text", "password".
min	(optional) the minimal value allowed in the input. The attribute works only with the input type: "number".
minlength	(optional) the minimum number of characters allowed in the input. The attribute works with the following input types: "text", "password".
placeholder	(optional) a tip for the input
readOnly	(optional) defines whether an input is readonly, false by default
hiddenLabel	(optional) makes the label invisible, false by default
label	(optional) specifies a label for a control
labelPosition	(optional) defines the position of a label: "left" | "top", "top" by default
labelWidth	(optional) sets the width of the label of a control
helpMessage	(optional) adds a help message to a control
preMessage	(optional) a message that contains instructions for interacting with the control
successMessage	(optional) a message that appears in case of successful validation of the control value
errorMessage	(optional) a message that appears in case of error during validation of the control value

Example

Related article: Input