Choices.Js
Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
Single Select Input: Default
Set
data-choices
attribute to set a default single select.
Single Select Input: Option Groups
Set
data-choices data-choices-groups
attribute to set option group
Single Select Input: No Search
Set
data-choices data-choices-search-false data-choices-removeItem
Single Select Input: No Sorting
Set
data-choices data-choices-sorting-false
attribute.
Multiple Select Input: Default
Set
data-choices multiple
attribute.
Multiple Select Input: With Remove Button
Set
data-choices data-choices-removeItem multiple
attribute.
Multiple Select Input: Option Groups
Set
data-choices data-choices-multiple-groups="true" multiple
attribute.
Text Input: Limit Values with Remove Button
Set
data-choices data-choices-limit="3" data-choices-removeItem
attribute.
Text Input: Unique Values Only
Set
data-choices data-choices-text-unique-true
attribute.
Text Input: Disabled
Set
data-choices data-choices-text-disabled-true
attribute.
Select2
Select2 is an advanced replacement for standard select boxes. It supports searching, remote data sources, and infinite scrolling of results.
Single Select Input with Button
An example of a select dropdown with an appended button using Tailwind + Preline.
Single Select Input with Groups
Select2 can take a regular select box with optgroup support for better organization.
Multiple Select Input
Preline multi-select with grouped options and placeholder support.