Input field (underline) with right icon to clear field

Hey guys,

Was going through your form components looking for an input field with a right X icon to clear the field. I tried to do something like this myself but your enhance puts a wrap around the input field: which takes up the whole line so my X icon gets pushed below to a new line. How would you go about this?

I know I can go old school and just put it in a table but I’m wondering what the best practise would be here.

Hi Michael,

You could do this using our own icons. After the input is enhanced, you can look up the icon, and attach a click event to it.


  <input id="my-input" data-icon="close" data-icon-align="right" />


$(function () { // Make sure it runs after the input is initialized
  var $myInput = $('#my-input');
  $myInput.parent().find('.mbsc-ic-close').on('click', function () {
    // Clear the input