vaadin-combo-box Custom Input

Custom Icons

The most basic customization option is to replace the toggle and clear buttons. You can do this by adding child elements to the vaadin-combo-box with class names toggle-button and clear-button respectively.


        HTMLImports.whenReady(function() {
          // code
          var combobox = combobox || document.querySelector('.custom');

          // The elements is an array of String values.
          combobox.items = elements;
          // end-code
        });

Iron Input

If you need more customization options, you can also replace the default input element with your own. In this case you need to use vaadin-combo-box-light element instead of the vaadin-combo-box. See the example below on how to replace the default input with an iron-input.


        HTMLImports.whenReady(function() {
          // code
          var combobox = combobox || document.querySelector('.simple');

          // The elements is an array of String values.
          combobox.items = elements;
          // end-code
        });

Paper Input

To add a custom input that is a bit similar to the default one, you can for example use paper-input. See the example below, which uses also prefix and suffix attributes to help with the positioning of the custom content.

Clear

Toggle


        HTMLImports.whenReady(function() {
          // code
          var combobox = combobox || document.querySelector('.advanced');

          // The elements is an array of String values.
          combobox.items = elements;
          // end-code
        });