Input

A text input field with an icon.

Adding Input

The following syntax shows how an Input control can be easily added to a ribbon:

ribbon.data.add({
    type:"input",
    value:"",
    placeholder:"Type to search"
});

Attributes

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

  • type - (string) the type of a control, set it to "input"
  • id - (string) the id of a control, auto-generated if not set
  • icon - (string) the name of an icon from the used icon font
  • placeholder - (string) a tip for the input
  • width - (number) the width of the input field
  • label - (string) a text label for the Input control
  • value - (string) 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 methods of Ribbon:

ribbon.show(id);
ribbon.hide(id);

Enabling/disabling Input

You can also disable and enable inputs:

ribbon.enable(id);
ribbon.disable(id);

Setting/getting Input value

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

To fill in Input with 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",
    id:"search",
    value: ""
}
...
ribbon.setState({search:"Summer"});

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

ribbon.getState();
// {search:"Summer"}
Back to top