menu
search
Basic usage

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

With placeholder

Select2 supports displaying a placeholder value using the data-placeholder attribute. The placeholder value will be displayed until a selection is made.

With optgroups

Select2 support group related options with <optgroup> tags

Multiple select boxes

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

Limit selection

Limit the number of options that can be selected via the data-maximum-selection-length attribute.

Live search

You can add a search input by passing data-select2-search="true" attribute.

Creatable

In addition to a prepopulated menu of options, Select2 can dynamically create new options from text input by the user in the search box. This feature is called "tagging". To enable tagging, set the data-tags attribute to true.

Custom content

To enable custom content, set the data-select2-content attribute to true.
Insert custom HTML into the option with the data-content attribute.

Sizing

Set size with data-select2-size attribute.

Clearable

Add a clear button ("x" icon) to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.