TypedInput Widget

A replacement for a regular <input> that allows the type of the value to be chosen, including options for string, number and boolean types.



Type: String

If defined, sets the default type of the input if typeField is not set.

    default: "msg"


Type: Array

Sets the list of types the element will offer.

The value of the option is an array of string-identifiers for the predefined types and TypeDefinition objects for any custom types.

The predefined types are:

identifier description
msg a msg. property expression
flow a flow. property expression
global a global. property expression
str a String
num a Number
bool a Boolean
json a valid JSON string
bin a Node.js Buffer
re a Regular Expression
jsonata a Jsonata Expression
date the current timestamp
env an environment variable
node a node. property expression
cred a secure credential
    types: ["msg","str"]


Type: CSS Selector

In some circumstances it is desirable to already have an <input> element to store the type value of the typedInput. This option allows such an existing element to be provided. As the type of the typedInput is changed, the value of the provided input will also change.

    typeField: ".my-type-field"


disable( state )

Since Node-RED 1.2.7

Disable the typedInput when it is currently enabled.

The optional state parameter can be used to toggle the disabled/enabled state of the typedInput. If state is true, the element will be disabled, otherwise it will be enabled.



Since Node-RED 1.2.7

Returns: Boolean

Gets whether the typedInput is currently disabled or not.



Since Node-RED 1.3.3

Enable the typedInput when it is currently disabled.



Hide the typedInput when it is currently visible.



Show the typedInput when it is currently hidden.



Returns: String

Gets the selected type of the typedInput.

var type = $(".input").typedInput('type');

type( type )

Sets the selected type of the typedInput.


types( types )

Sets the list of types offered by the typedInput. See the description of the types option.



Returns: Boolean

Triggers a revalidation of the typedInput’s type/value. This occurs automatically whenever the type or value change, but this method allows it to be run manually.

var isValid = $(".input").typedInput('validate');


Returns: String

Gets the value of the typedInput.

var value = $(".input").typedInput('value');

value( value )

Sets the value of the typedInput.


width( width )

Sets the width of the typedInput.

$(".input").typedInput('width', '200px');


change( event, type, value )

Triggered when either the type or value of the input is changed.

$(".input").on('change', function(event, type, value) {} );

Note: The value property was added in Node-RED 1.3



A TypeDefinition object describes a type that can be offered by a typedInput element.

It is an object with the following properties:

Property Type Required Description
value string yes The identifier for the type
label string   A label to display in the type menu
icon string   An icon to display in the type menu. This can be either an image url, or a FontAwesome 4 icon, for example "fa fa-list".
options array   If the type has a fixed set of values, this is an array of string options for the value. For example, ["true","false"] for the boolean type.
multiple boolean   If options is set, this can enable multiple selection of them.
hasValue boolean   Set to false if there is no value associated with the type.
validate function   A function to validate the value for the type.
valueLabel function   A function that generates the label for a given value. The function takes two arguments: container - the DOM element the label should be constructed in, and value.
autoComplete function   Since 2.1.0. If set, enable autoComplete on the input, using this function to get completion suggestions. See autoComplete for details. This option cannot be used with options, hasValue=false or valueLabel


Built-in String, Number, Boolean types

<input type="text" id="node-input-example1">

Message Properties

<input type="text" id="node-input-example2">

Flow/Global Context Properties

<input type="text" id="node-input-example3">

Select from a list of options

<input type="text" id="node-input-example4">
$("#node-input-example4").typedInput({type:"fruit", types:[{
    value: "fruit",
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},

Select multiple items from a list of options

<input type="text" id="node-input-example5">
$("#node-input-example5").typedInput({type:"fruit", types:[{
    value: "fruit",
    multiple: true,
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},