Choices.js

Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

For all config options, visit the GitHub repo.

Interested in writing your own ES6 JavaScript plugins? Check out ES6.io for great tutorials! 💪🏼

Sponsored by:

Text inputs

Limited to 5 values with remove button Unique values only, no pasting Email addresses only Disabled Prepends and appends a value to each items return value Preset values passed through options I18N labels Right-to-left

Multiple select input

Default With remove button Option groups

If the following example do not load, the Discogs rate limit has probably been reached. Try again later!

Options from remote source (Fetch API) & limited to 5 Right-to-left Use label in event (add/remove)

Single select input

Default

If the following two examples do not load, the Discogs rate limit has probably been reached. Try again later!

Options from remote source (Fetch API) Options from remote source (Fetch API) & remove button Option groups Right-to-left Options added via config with no search Option and option groups added via config Option selected via config with custom properties

Try searching for 'fantastic', "Label 3" should display

Option searchable by custom properties via data-custom-properties attribute

Try searching for 'fantastic', "Label 3" should display

Options without sorting Custom templates

Below is an example of how you could have two select inputs depend on eachother. 'Tube stations' will only be enabled if the value of 'Cities' is 'London'

Cities Tube stations

Form interaction

Change the values and press reset to restore to initial state.