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.