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! 💪🏼

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

Choice 1 Choice 2 Choice 3 Choice 4

With remove button

Choice 1 Choice 2 Choice 3 Choice 4

Option groups

Choose a city London Manchester Liverpool Paris Lyon Marseille Hamburg Munich Berlin New York Washington Michigan Madrid Barcelona Malaga Montreal Toronto Vancouver

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

Choice 1 Choice 2 Choice 3 Choice 4

Use label in event (add/remove)

Single select input

Default

This is a placeholder Choice 1 Choice 2 Choice 3

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)

Pick an Arctic Monkeys' record

Options from remote source (Fetch API) & remove button

Pick a Smiths' record

Option groups

Choose a city London Manchester Liverpool Paris Lyon Marseille Hamburg Munich Berlin New York Washington Michigan Madrid Barcelona Malaga Montreal Toronto Vancouver

Right-to-left

Choice 1 Choice 2 Choice 3

Options added via config with no search

Zero

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

Label One Label Two Label Three

Options without sorting

Madrid Toronto Vancouver London Manchester Liverpool Paris Malaga Washington Lyon Marseille Hamburg Munich Barcelona Berlin Montreal New York Michigan

Custom templates

React Angular Ember Vue

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

Choose a city Leeds Manchester London Sheffield Newcastle

Tube stations

Choose a tube station Moorgate St Pauls Old Street Liverpool Street Kings Cross St. Pancras

Form interaction

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