Input

The Input control displays a text input field with an icon.

Add Input

The following code adds an Input control to a ribbon:

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

Related sample: Ribbon. Input

Properties

Check the list of properties that you can set in the configuration object of an Input control.

Show and hide Input

The show() and hide() methods of Ribbon show and hide an Input control by its ID:

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

Enable and disable Input

The enable() and disable() methods enable and disable an Input control by its ID:

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

Set and get the Input value

Use the setState() and getState() methods of Ribbon to set and get the value of an Input control.

To fill an Input control with text, pass a key-value pair to the setState() method. 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 current text of an Input control, call the getState() method:

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