# Select2

We have included select2 plugin for enhanced select options. select2 is free and open source plugin you can check it here <https://select2.org>

### Setup

#### Step 1

Add the plugin css before the atlas stylesheet as we have tuned it according to the scheme of our admin panel

```markup
<link rel="stylesheet" href="assets/vendor/select2/css/select2.min.css">
```

#### Step 2

Include plugin Javascript file before \</body>

```markup
<script src="assets/vendor/select2/js/select2.full.min.js" type="text/javascript"></script>
```

#### Step 3

Add `.js-select` class as selector&#x20;

```markup
<select  class="form-control js-select2">
    <option selected>Apple Pie</option>
    <option>Cup Cake</option>
    <option>Donut</option>
    <option>Eclair</option>
    <option>Froyo</option>
    <option>GingerBread</option>
    <option>HoneyComb</option>
    <option>Ice Cream Sandwich</option>
    <option>Jellybean</option>
    <option>Kitkat</option>
    <option>Lollipop</option>
    <option>Marshmallow</option>
    <option>Nougat</option>
    <option>Oreo</option>
</select>
```

#### Step 4

Initialize the plugin

```javascript
$(".js-select2").select2();
```

### Select2 Tag Input

you also have multiple inputs by using multiple attribute with select tag

```markup
<select multiple class="form-control js-select2">
    <option selected>Apple Pie</option>
    <option>Cup Cake</option>
    <option>Donut</option>
    <option>Eclair</option>
    <option>Froyo</option>
    <option>GingerBread</option>
    <option>HoneyComb</option>
    <option>Ice Cream Sandwich</option>
    <option>Jellybean</option>
    <option>Kitkat</option>
    <option>Lollipop</option>
    <option>Marshmallow</option>
    <option>Nougat</option>
    <option>Oreo</option>
</select>
```

### For more options refer&#x20;

{% embed url="<https://select2.org>" %}