Choices.js – nice select inputs UI

A great vanilla JS customizable select box/text input plugin, to build awesome forms UI.

Choices.js – make your input select boxes beautiful

A vanilla, lightweight (~20kb gzipped), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency. Instead we have very extensive options of configurations. Additionally it gives us configurable sorting, flexible styling, fast search/filtering, clean API, right-to-left text support, and custom templates. We can turn boring select inputs into nice UI “tags” really easy. There’s no jQuery dependency, but choices.js can cooperate with jQ with no issues.

Choices.js - samples
Choices.js – samples

Setup

npm install choices.js

or

yarn add choices.js

Sample code

// Pass multiple elements:
const [firstInstance, secondInstance] = new Choices(elements);

// Pass single element:
const choices = new Choices(element);

// Pass reference
const choices = new Choices('[data-trigger]');
const choices = new Choices('.js-choice');

...

Homepage (Github)

https://github.com/jshjohnson/Choices

Demo

https://joshuajohnson.co.uk/Choices

License: MIT

See also

HTML5 range slider input – rangeslider.js

jQuery autocomplete with nice effect – Tab Complete

Awesome Bootstrap checkboxes and radios

Enjoy!