Modern Tags Input/Multiple Select Component – multi-input

Category: Form , Javascript | January 16, 2020
Author: samdutton
Views Total: 88
Official Page: Go to website
Last Update: January 16, 2020
License: MIT


Modern Tags Input/Multiple Select Component – multi-input


multi-input is a modern tags input & multiple select component that works with the native input field and uses datalist to define a list of suggestions/options for the autocomplete.


  • Click ‘x’ button or press Backspace to remove an item.
  • Auto removes duplicate items.

How to use it:

1. Insert a multi-input component into the webpage as follows:

  <input list="languages">
  <datalist id="languages">
    <option value="JavaScript"></option>
    <option value="Python"></option>
    <option value="Java"></option>
    <option value="C/C++"></option>
    <option value="PHP"></option>
    <option value="Swift"></option>
    <option value="Ruby"></option>
    <option value="Objective-C"></option>
    <option value="SQL"></option>

2. Load the multi-input.js script at the end of the document.

<script src="multi-input.js"></script>

3. Get the selected values as an array.

${multiInput.getValues().join(' and ')}

You Might Be Interested In:

Leave a Reply