Skip to main content

Input properties

Usage

{
type: "input",
name?: string,
id?: string,
value?: string | number,

css?: string,
disabled?: boolean, // false by default
height?: string | number | "content", // "content" by default
hidden?: boolean, // false by default
padding?: string | number, // "8px" by default
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
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, "8px" by default
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 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