Input field (underline) with right icon to clear field

#1

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.

image
image.png526×693 19.9 KB

#2

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.

HTML:

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

JS:

$(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
    $myInput.val('');
  });
});