### Select2

#### Single Select2

Select2 can take a regular select box with search options within the Select control.

Basic Select

Use `.select2` class for basic select2 control.

Single Select with Label
Responsive design - Percent width

Select2's width can be set to a percentage of its parent to support responsive design. The two Select2 boxes below are styled to 50%.

Single Placeholder

A placeholder value can be defined and will be displayed until a selection is made. Select2 uses the placeholder attribute on multiple select boxes.

Disabled Mode

Select2 will respond to the `disabled` attribute on `<select>` elements. You can also initialize Select2 with `disabled: true` to get the same effect.

Disabled Result
Hiding the search box

Select2 allows you to hide the search box depending on the number of options which are displayed. In this example, we use the value `Infinity` to tell Select2 to never display the search box.

Select With Icon

Use data attribute `data-icon` to add icon name for each options. And use class `.select2-icons` to set icon with option.

#### Multiple Select

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

Basic Multi Select

Use `.select2` class for basic select2 control. Use `multiple="multiple"` attribute for multiple select box.

Multi Select with Label
Multi Select with Percent width

Select2's width can be set to a percentage of its parent to support responsive design. The two Select2 boxes below are styled to 75%.

Multi Select Placeholder
Disabled Mode

Select2 will respond to the `disabled` attribute on `<select>` elements. You can also initialize Select2 with `disabled: true` to get the same effect.

Disabled Result
Multi Select with Label

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

Select With Icon

Use data attribute `data-icon` to add icon name for each options. And use class `.select2-icons` to set icon with option.

#### Programmatic control

#### DOM Events

Select2 will trigger some events on the original select element, allowing you to integrate it with other components.

DOM Single
DOM Multiple

#### Programmatic access

Select2 supports methods that allow programmatic control of the component.

Programmatic Single
Programmatic Multiple

#### Advance Options

#### Single Select Options

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.

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.

Localization

Select2 supports displaying the messages in different languages, as well as providing your own custom messages that can be displayed. The language does not have to be defined when Select2 is being initialized, but instead can be defined in the `[lang]` attribute of any parent elements as `[lang="es"]`.

RTL support

Select2 will work on RTL websites if the `dir` attribute is set on the `<select>` or any parents of it. You can also initialize Select2 with `dir: "rtl"` set.

Diacritics support

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

Template support

Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the `classic` theme, which matches the old look of Select2.

Templating

Various display options of the Select2 component can be changed: You can access the `<option>` element (or `<optgroup>`) and any attributes on those elements using .element. Templating is primarily controlled by the `templateResult` and `templateSelection` options.

#### Multiple Select Options

Tagging Support

Select2 can be used to quickly set up fields used for tagging. Note that when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far.

Automatic 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. The separators that should be used when tokenizing can be specified using the `tokenSeparators` options.

Customizing How Results Are Matched

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: This custom matcher uses a compatibility module that is only bundled in the full version of Select2. You also have the option of using a more complex matcher.

RTL support With MultiSelect

Select2 will work on RTL websites if the `dir` attribute is set on the `<select>` or any parents of it. You can also initialize Select2 with `dir: "rtl"` set.

Diacritics support

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

Template support With Multiselect

Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the `classic` theme, which matches the old look of Select2.

#### Sizing

#### Single Select

For different sizes of select2, Use classes like `.select2-size-xs`, `.select2-size-sm` & `.select2-size-lg` for Large, small & Extra Small Select respectively.

Large Select
Default Select
Small Select
Extra Small Select

#### Multiselect Sizings

For different sizes of select2, Use classes like `.select2-size-xs`, `.select2-size-sm` & `.select2-size-lg` for Large, small & Extra Small Select respectively.

Large Select
Default Select
Small Select
Extra Small Select

#### Color Options

#### Single Select

Background Color

Use class `.select2-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for background color of control.

Menu Background Color

Use class `.select2-menu-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for Menu Background color.

Full Background Color

Use class `.select2-full-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for full select2 control background color.

Border Color

Use class `.select2-border` with `data-border-color` & `data-border-variation` attributes class for Border color of control.

#### Multiple Select

Background Color

Use class `.select2-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for background color of control.

Menu Background Color

Use class `.select2-menu-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for Menu Background color.

Full Background Color

Use class `.select2-full-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for full select2 control background color.

Border Color

Use class `.select2-border` with `data-border-color` & `data-border-variation` attributes class for Border color of control.

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now