Form Inputs & Controls


  • Chosen is a replacement for browser dropdown lists.
    You can find more info about its options here:
  • To use it, you should include:
  • A basic example could be like this:
  • Add .tag-input-style class to select element for an alternative multiple chosen style:
  • Please note that if chosen element is inside a container which is hidden at first, it may not render properly.
    To resolve it you should create the chosen or reset its width when the container is shown:
     //an example of a chosen inside a modal
     $('#modal-form').on('', function () {
     $('#modal-form').on('', function () {
           $(this).find('a:first-child').css('width' , '210px');
           $(this).find('.chosen-drop').css('width' , '210px');
           $(this).find('.chosen-search input').css('width' , '200px');
  • Chosen plugin is not responsive by default and to make it so, you should change its dimensions on window resize event:
    $(window).on('resize.chosen', function() {
        //get its parent width
        var w = $('.chosen-select').parent().width();
  • Chosen does not support touch devices.
    So you can ignore touch devices when initiating chosen on an element:
    if(!ace.vars['touch']) {
      //only enable chosen if not a touch device!


  • Select2 is similar to chosen with more advanced features such as remote data loading.
    For more info please see
  • To use it you should include:
  • You can add .tag-input-style class to select element for an alternative multiple chosen style:

Tag Input

  • For more info about tag input plugin, please see its page at:
  • To use it, you should include:
  • Its autocomplete feature is powered by Bootstrap's typeahead plugin.
  • A basic example which retrieve's autocomplete data dynamically from server is like this:
    var tag_input = $('#form-field-tags');
          placeholder: tag_input.attr('placeholder'),
          //source: ['tag 1', 'tag 2'],//static autocomplet array
          //or fetch data from database, fetch those that match "query"
          source: function(query, process) {
             $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
    catch(e) {
       //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
       tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
  • You can also add new tags using the following code:
    //programmatically add a new tag
    var $tag_obj = $('#form-field-tags').data('tag');
    $tag_obj.add('new tag');

Dual Listbox

Bootstrap Multiselect

Masked Input

Input Limiter

  • Input Limiter plugin, limit's textarea input size by displaying a message to user which shows remaining characters.
  • For more info please see:
  • To use it, you should include:
  • A basic example would be like this:
       remText: '%n character%s remaining...',
       limitText: 'max allowed : %n.'

Auto Size

  • Textarea autosize, is used for automatically increasing textarea height as user input grows.
  • For more info please see its page at:
  • To use it, you should include:
  • A basic example would be something like this:
    $('textarea.autosize').autosize({append: "\n"});