Text properties

Usage

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

    css?: string,
    disabled?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean, // false by default
    padding?: string | number,
    width?: string | number | "content", // "content" by default

    inputType?: "text" | "password" | "number", // "text" by default
    
    ariaLabel?: string,
    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 "text"
name	(optional) the name of a control
id	(optional) the id of a control, auto-generated if not set
value	(optional) the value of a text control
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) defines whether a control is hidden, false by default
padding	(optional) sets padding between a cell and a border of the Text control
width	(optional) the width of a control, "content" by default
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
ariaLabel	(optional) the accessible name of a control, which a screen reader announces. If not set, the label is used, or the value of the control if there is no label
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: Text