Select2

  1. Home
  2. Form Elements
  3. Select2

Single Select Sizes

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

Default Select

Large Select

Small Select

Extra Small Select

Multi select Sizes

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

Default Select

Large Select

Small Select

Extra Small Select

Single Select Options

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

Single Select with Label

Disabled Mode

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.

Multi Select Options

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

Multi Select with Label

Multi Select with 75% width

Multi Select Placeholder

Disabled Mode

Multi Select with Label

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.

Color Options

Single Select2

Background Color

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

Full Background Color

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

Multiple Select

Background Color

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

Full Background Color

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

Programmatic access & DOM Events

Programmatic access

Select2 supports methods that allow programmatic control of the component.

Programmatic Single
Programmatic Multiple

DOM Events

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

DOM Single
DOM Multiple

Advanced Options

Single Select

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.

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.

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

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.