#### Forms - Select2 Selects

Statistics Invoices Schedule

###### Basic setup

Examples with basic options

##### Single select

Basic select
Fixed select width
Select with search
Select with placeholder
Select with icons
Disable items
Disabled select
Select background color
Menu background color
Custom color
Custom border and text color

##### Multiple select

Multiple select
Fixed width select
With placeholder
With icons
Drag and drop sorting
Disable menu items
Disabled select
Results background color
Menu background color
Custom colors
Custom border color

###### Select sizing

Single and multiple selects sizing

##### Single select sizing

Large select
Default select
Small select

##### Multiple select sizing

Large select
Default select
Small select

###### Advanced usage

More complex configurations

##### Advanced single selects

###### Minimum input

Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful. Simply specify a number of input characters using `minimumInputLength` option:

###### Customizing how results are matched

Example of how matched results can be customized. Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere.

###### Loading array data

Select2 provides a way to load the data from a local array. You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select.

1. Example below loads array:

2. Example below loads array with selected option:

###### Loading remote data

Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API. Example also includes infinite scrolling feature:

###### Diacritics support in single select

Select2's default matcher will ignore diacritics, making it easier for users to filter results in international selects. Type "aero" into the select below:

###### Clearing results

Whether or not a clear button is displayed when the select box has a selection. The button, when clicked, resets the value of the select box back to the placeholder.

###### Programmatic access

Select2 supports methods that allow programmatic control of the component: you can set and get single or multiple values, control menu visibility by opening and closing it, make the menu enabled or disabled.

1. Set and get value:

2. Enable and disable menu:

3. Destroy and create menu:

4. Open and close menu:

##### Advanced multiple selects

###### Tagging support

Select2 can be used to quickly set up fields used for tagging. When tagging is enabled the user can select from pre-existing tags or create a new tag by picking the first choice.

###### Maximum input length

Select2 can be set a limit on the number of characters that can be entered per tag. You would not be able to enter any input of more than 5 characters long.

###### Auto tokenization

Select2 supports ability to add choices automatically as the user is typing into the search field. Try typing in the search field below and entering a space or a comma.

###### Limiting the number of selections

Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with `maximumSelectionLength` option.

###### Diacritics support in multiple select

Select2's default matcher will ignore diacritics, making it easier for users to filter results in international selects. Type "aero" into the select below:

###### Programmatic access

Select2 supports methods that allow programmatic control of the component: you can set and get single or multiple values, control menu visibility by opening and closing it, make the menu enabled or disabled.

1. Reacting to external value changes:

2. Enable and disable menu:

3. Destroy and create menu:

4. Clear selection:

5. Open and close menu: