# container

***

Type: `{String|Object}`

Default: `document.body`

***

Defines the container where selection is allowed.

***

{% hint style="info" %}
This option was previously known as `appendTo`.
{% endhint %}

***

You can pass either a CSS3 selector string or a node reference.

It's best to define the container as the closest ancestor to the items as possible and not have any other interactive elements (buttons, inputs, etc) within it as interacting with them will unselect the selectable items.

{% hint style="info" %}
If you have multiple instances and don't define a container with the [container](/selectable/api/options/container.md) option, any events you have attached to them will fire at the same time as they all share the same container (`document.body`). This can lead to other unwanted effects like deselection of all other instances items when clicking / tapping on the one instance.
{% endhint %}

***

### Example

```javascript
new Selectable({
    container: "#container"
});

// or

new Selectable({
    container: document.getElementById("container")
});
```

***

The container can be updated dynamically with the [`setContainer()`](/selectable/api/methods/setcontainer.md) method.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mobius-studios.gitbook.io/selectable/api/options/container.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.