This is an input field for entering some text.

Related sample:  Toolbar. Input

Adding Input

The following example shows how an Input control can be easily added to a toolbar with the help of the add() method of Tree Collection:{
    placeholder:"Type to search"


You can provide the following attributes in the configuration object of an input field:

  • type - (string) required, the type of a control, set it to "input". If not specified - the "navItem" type is applied by default.
  • id - (string) the id of a control, auto-generated if not set
  • icon - (string) optional, the name of an icon from the used icon font
  • placeholder - (string) optional, a tip for the input
  • width - (number) optional, the width of the input field
  • label - (string) optional, a text label for the Input control
  • value - (string) optional, the initial value of the field
  • tooltip - (string) a tooltip for an input
  • inputType - (string) sets the type of an input, use the "password" value to specify a field for entering a password

Showing/hiding input

You can show or hide Input with the show()/hide() methods of Toolbar:;

Related sample:  Toolbar. Hide/Show

Enabling/disabling input

You can also enable and disable inputs with the enable()/disable() methods of Toolbar:


Related sample:  Toolbar. Enable/Disable

Setting tooltip

You can create a tooltip for an input:

    type: "input",
    value: "",
    tooltip:"Type to search"

Related sample:  Toolbar. Tooltips

Setting/getting value

You can use the setState() and getState() methods of Toolbar to change and access the value of Input.

To fill in Input with some text, call setState() with a key-value pair as a parameter, where the key is the ID of the input and the value is the text:

    type: "input",
    value: ""

To get the text that is currently inside the Input control, call getState():

toolbar.getState(); //-> {search:"Summer"}

Check the full list of available operations in the Toolbar API and Tree Collection API.

Back to top