@@include('../layouts/head-page-meta.html', {'title': 'Choices'}) @@include('../layouts/head-css.html')
@@include('../layouts/layout-vertical.html')
@@include('../layouts/breadcrumb.html', {'breadcrumb-item': 'Forms', 'breadcrumb-item-active': 'Choices'})
@@include('../layouts/component/component-link.html',{ title:'Choices.js', text:'Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.', link:'https://choices-js.github.io/Choices/'})

##### 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
Options from remote source (Fetch API) & limited to 5
If the following example do not load, the rate limit has probably been reached. Try again later!
Right-to-left
Use label in event (add/remove)

##### Single select input

Default
Options from remote source (Fetch API)
If the following two examples do not load, the rate limit has probably been reached. Try again later!
Options from remote source (Fetch API) & remove button
If the following two examples do not load, the rate limit has probably been reached. Try again later!
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
Cities
Below is an example of how you could have two select inputs depend on each other. 'Tube stations' will only be enabled if the value of 'Cities' is 'London'
Tube stations

##### Form interaction

Change the values and press reset to restore to initial state.
Change me!
And me!
@@include('../layouts/footer-block.html') @@include('../layouts/footer-js.html') @@include('../layouts/customizer.html')