Form Select | Multipurpose Tailwind CSS 4 & Bootstrap 5 Admin Dashboard Template

Select

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.

Note: This is a jQuery-based plugin, so you need to include jQuery for it to work.

Single Select Input with Button

An example of a select dropdown with an appended button using Select2.

Single Select Input with Groups

Select2 can take a regular select box with optgroup support for better organization.

Multiple Select Input

Select2 multiple select with grouped options and placeholder.