> For the complete documentation index, see [llms.txt](https://mobius-studios.gitbook.io/selectable/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mobius-studios.gitbook.io/selectable/api/methods/select.md).

# select()

Selects an item or a collection of items.

***

The method accepts a single argument in the following forms:

* `HTMLElement`
* `HTMLCollection` 
* `NodeList`
* `Number` - the index of the selectable item in the `items` array
* `Object` - a reference to the `item` stored in the `items` array
* `Array` - an array of `HTMLElement`, indexes or item references

### **Selecting single items**

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

```html
<ul id="list">
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
</ul>
```

{% endtab %}

{% tab title="JS" %}

```javascript
const list = document.getElementById('list');
const selectable = new Selectable({
    container: list
});

// as a node
const item = list.querySelectorAll("li")[0];
selectable.select(item);

// as an index
const itemIndex = 0;
selectable.select(itemIndex);

// as a reference to the item
const item = selectable.items[0];
selectable.select(item);
```

{% endtab %}
{% endtabs %}

### **Selecting multiple items**

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

```html
<ul id="list">
    <li class="ul-selectable">1</li>
    <li class="ul-selectable alt">2</li>
    <li class="ul-selectable">3</li>
    <li class="ul-selectable alt">4</li>
    <li class="ul-selectable">5</li>
    <li class="ul-selectable alt">6</li>
    <li class="ul-selectable">7</li>
    <li class="ul-selectable alt">8</li>
</ul>
```

{% endtab %}

{% tab title="JS" %}

```javascript
const list = document.getElementById('list');
const selectable = new Selectable({
    container: list
});

// Select the first 3 items via their indexes
const itemsA = [0,1,2];
selectable.select(itemsA);

// select all items with className "alt"
const itemsB = list.querySelectorAll(".alt");
selectable.select(itemsB);

// select all list items
const itemsC = list.querySelectorAll("li");
selectable.select(itemsC);
```

{% endtab %}
{% endtabs %}

### Using indexes <a href="#usingindexes" id="usingindexes"></a>

{% hint style="info" %}
**NOTE:** If selecting an item via an index, you must pass the index as the node would appear in the collection of selectable items, NOT the element's position relative to it's sibling elements.
{% endhint %}

```html
<ul>
    <li class="ul-selectable">1</li> // index 0
    </li></li>
    </li></li>
    <li class="ul-selectable">2</li> // index 1
    <li class="ul-selectable">3</li> // index 2
    <li class="ul-selectable">4</li> // index 3
    </li></li>
    <li class="ul-selectable">5</li> // index 4
</ul>
```

**Select the first, second and third items**

```javascript
// incorrect
selectable.select([0,3,4]);

// correct
selectable.select([0,1,2]);
```