Customizable Select Box & Input Field Enhancement Library – Choices.js

Category: Form , Javascript | November 18, 2019
Views Total:11,548 views
Official Page:Go to website
Last Update:November 18, 2019


Customizable Select Box & Input Field Enhancement Library – Choices.js


Choices.js is a vanilla JavaScript plugin which converts the normal select and input into customizable select inputs with multi select and autocomplete support. Great for creating multi-select tagging systems.

How to use it:

Load the following JavaScript and Stylesheet in your document.

<link rel="stylesheet" href="choices.css">
<script src="choices.min.js"></script>

Create a simple tag input from a normal text field that

<input id="demo-1" type="text" value="tag-1,tag-2" placeholder="Enter something">
var firstElement = document.getElementById('demo-1');
var choices1 = new Choices(firstElement, {
    delimiter: ',',
    editItems: true,
    maxItems: 5,
    removeButton: true

Create a multiple select input.

<select name="demo-2" id="demo-2" placeholder="This is a placeholder" multiple>
  <option value="Dropdown item 1">Dropdown item 1</option>
  <option value="Dropdown item 2">Dropdown item 2</option>
  <option value="Dropdown item 3" selected>Dropdown item 3</option>
  <option value="Dropdown item 4" disabled>Dropdown item 4</option>
var secondElement = new Choices('#demo-2', { allowSearch: false }).setValue(['Set value 1', 'Set value 2']);

Create a multiple select input that loads remote data via AJAX.

<select name="demo-3" id="demo-3" data-choice placeholder="Pick an Arctic Monkeys record"></select>
var choicesAjax = new Choices('#demo-2').ajax((callback) => {
        .then((response) => {
            response.json().then(function(data) {  
                callback(data.releases, 'title', 'title');
        .catch((error) => {

All possible options and callbacks with default values.

items: [],
addItems: true,
removeItems: true,
removeButton: false,
editItems: false,
maxItems: false,
delimiter: ',',
allowDuplicates: true,
allowPaste: true,
allowSearch: true, 
_regexFilter: false,
placeholder: true,
placeholderValue: '',
prependValue: false,
appendValue: false,
selectAll: true,
loadingText: 'Loading...',
templates: {},
classNames: {
  containerOuter: 'choices',
  containerInner: 'choices__inner',
  input: 'choices__input',
  inputCloned: 'choices__input--cloned',
  list: 'choices__list',
  listItems: 'choices__list--multiple',
  listSingle: 'choices__list--single',
  listDropdown: 'choices__list--dropdown',
  item: 'choices__item',
  itemSelectable: 'choices__item--selectable',
  itemDisabled: 'choices__item--disabled',
  itemOption: 'choices__item--option',
  group: 'choices__group',
  groupHeading : 'choices__heading',
  button: 'choices__button',
  activeState: 'is-active',
  focusState: 'is-focused',
  openState: 'is-open',
  disabledState: 'is-disabled',
  highlightedState: 'is-highlighted',
  hiddenState: 'is-hidden',
  flippedState: 'is-flipped',
  selectedState: 'is-selected',
callbackOnInit: () => {},
callbackOnRemoveItem: () => {},
callbackOnAddItem: () => {}


v9.0.1 (11/18/2019)

  • Bugfix

v9.0.0 (11/15/2019)

  • Add missing type definitions + rename sortFn.
  • Bugs fixed.

v8.0.0 (11/03/2019)

  • The ability to pass multiple elements to one instance of Choices has been removed – now only one element can be associated with Choices
  • The undocumented userDefaults static property has been removed
  • The ajax method has been removed. setChoices can now be used to set choices dynamically
  • The addItemFilterFn option has been renamed to addItemFilter and now supports regex’s
  • Element.prototype.closest has been added to the required polyfill list
  • The .is-hidden class has been replaced with the hidden attribute
  • Bugs fixed
  • Code refactoring

v7.1.5 (10/24/2019)

  • Bugs fixed

v7.1.0 (10/22/2019)

  • Bugs fixed

v7.0.3 (10/22/2019)

  • Bugs fixed


  • v6.0.2: Resolve undefined error


  • v6.0.1


  • v6.0.0: callback to filter items before adding


  • v5.1.0: callback to filter items before adding


  • v4.1.4: Bugfix


  • v4.1.3: Fix set choice by value bug


  • v4.1.2: Fix form submission bug in firefox


  • v4.1.0: Disable input when loading remote data


  • v4.0.6: Disable at a later stage of intialising

You Might Be Interested In:

10 thoughts on “Customizable Select Box & Input Field Enhancement Library – Choices.js

  1. Victor

    i created a REST call api for my Dbase, what parameters could be used for ur API?

    var choicesAjax = new Choices(‘#demo-2’).ajax((callback) => {
    .then((response) => {
    response.json().then(function(data) {
    callback(data.releases, ‘title’, ‘title’);
    .catch((error) => {

  2. Youne

    I could create a simple tag input from a normal text field but the end user can not edit the tags created. Is that possible please ? Thanks.

  3. adar

    why i get this error : TypeError: (new Choices(…)).ajax is not a function ??

  4. JuanPa

    add one item
    .setValue([‘Set value 1’]);

    how remove these item with a function?
    No a button or the spacebar

    1. Chritian

      Hello, i try

      element = new coices…

      But it not works…

  5. Nelson

    watch out for the example!!!!! this doesn’t work anymore:
    maxItems: 5,
    removeButton: true

    I changed that for this:
    maxItemCount: -1,
    removeItemButton: false,

  6. Ore

    hi, i am unable to put > symbol as it encodes to &rt; can you please suggest where to update this ? to show just > symbols


Leave a Reply