> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/pro-pack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/pro-pack/select2.md).

# Select2

![Select2 for WireBootstrap](https://795937403-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGjmp6bcmNAsAEW4hIY%2F-MJhwdivMcpKsWlHGX6b%2F-MJieEqE28lslcioZ9kq%2Fimage.png?alt=media\&token=aecbb0fb-bdfe-42f3-962d-86cf6c40941c)

[Select2](https://select2.org) gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Select2 for WireBootstrap brings Select2 into the WireBootstrap framework providing a powerful way of filtering data in applications developed with Bootstrap themes.

## Installation

The Select2 for WireBootstrap library is located in `wire-select2.js`.  This and other other related files can be installed from the NPM package registry at`@wirebootstrap/wire-select2`.

```javascript
npm install @wirebootstrap/wire-select2
```

Select2 for WireBootstrap will load `select2.full.min.js` from a [CDN](https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.min.js) if it's not found on the page.  

Select2 for WireBootstrap will load `select2.min.css` from a [CDN](https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css) if not found on the page.  

## Class

Select2 for WireBootstrap extends the [wire.ui.component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) class.  As such, it inherits all the base functionality of that class.

To create a new instance of the Select2 for WireBootstrap component, use the `wire.select2` class.

```javascript
const select2 = new wire.select2();
```

## Render

Render the component using an HTML `select` element.

{% tabs %}
{% tab title="JavaScript" %}

```html
<select id="select" class="form-control"></select>
<script>
    new wire.select2().render("#select", {});
</script>
```

{% endtab %}

{% tab title="Web Component" %}

```html
<wire-select2 wr-config=""></wire-select2>
```

{% endtab %}

{% tab title="React" %}

<pre class="language-jsx"><code class="lang-jsx"><strong>&#x3C;WireComponent component="wire.select2" config={}>
</strong>    &#x3C;select className="form-control">&#x3C;/select>
&#x3C;/WireComponent>
</code></pre>

{% endtab %}

{% tab title="Vue" %}

```jsx
<select 
    wire-component="wire.select2" 
    v-wire-config="" 
    class="form-control">
</select>
```

{% endtab %}

{% tab title="Angular" %}

```html
<select 
    wire-component="wire.select2" 
    [config]="" 
    class="form-control">
</select>
```

{% endtab %}
{% endtabs %}