Select 2

Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.

Single select boxes

Select2 can take a regular select box like this...

Multi-select boxes

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

Text Placeholders

The most common situation is to use a string of text as your placeholder value.

Multi-select Placeholders

For multi-selects, you must not have an empty `<option>` element:

Dropdown Option Groups

In HTML, `<option>` elements can be grouped by wrapping them with in an `<optgroup>` element:

Disabling Option

Select2 will correctly handle disabled options, both with data coming from a standard select (when the `disabled` attribute is set) and from remote sources, where the object has `disabled: true` set.

Limiting the number of selections

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

Clearable selections

When set to `true`, causes 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.

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 the `dir: "rtl"` configuration option.