# classes

***

Type: `Object`

Default:&#x20;

```javascript
{
    lasso: "ui-lasso",
    handle: "ui-handle",
    focused: "ui-focused",
    selected: "ui-selected",
    container: "ui-container",
    selecting: "ui-selecting",
    selectable: "ui-selectable",
    deselecting: "ui-deselecting"
}
```

***

Defines the class names used by the instance.

***

### Properties

* `container` - the container defined by the [`container`](container) option
* `selectable` - the class name used to mark items as selectable
* `selected` - the class name used for selected items
* `selecting` - the class name used when an item is highlighted for selection
* `deselecting` - the class name used when an item is highlighted for deselection
* `lasso` - the class name used for the lasso
* `focused` - the class name when hovering over the container (v0.22.0 and above)
* `handle` - the class name added to the defined handle elements (v0.22.0 and above)

***

### Example

```javascript
const selectable = new Selectable({
    classes: {
        lasso: "my-custom-lasso-classname",
        selected: "my-custom-selected-classname",
        container: "my-custom-container-classname",
        selecting: "my-custom-selecting-classname",
        selectable: "my-custom-selectable-classname",
        unselecting: "my-custom-unselecting-classname"
    }
});
```
