# Slots

| Slot       | Scope                     | Description                                                                                                                                         |
| ---------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| option     | **option, index, select** | Allows to provide custom template for the options in the dropdown list.                                                                             |
| selected   | **option, index, select** | Template for the selected options in the dropdown list.                                                                                             |
| both       | **option, index, select** | Template for both `option` and `selected` slots. Use when you want to provide similar templates for the selected options and those in the dropdown. |
| beforelist | **select**                | Add content before options in dropdown list                                                                                                         |
| afterlist  | **select**                | Add content after options in dropdown list                                                                                                          |
| spinner    | **select**                | Add content to spinner element                                                                                                                      |

Where scope properties are :

* **option** - [VSelectOption ](https://desislavsd.gitbook.io/vue-select/vselectoption)instance
* **select** - the vSelect instance
* **phrase** - the phrase in the input

{% hint style="success" %}
If the template you provide for `option` or `selected` or `both` slots contains only one root element it will replace the default root element for these slots. This way you may have complete control over the used tag, classes and attributes.
{% endhint %}

{% hint style="success" %}
You can add your own slots by modifying the [**Layout**](https://desislavsd.gitbook.io/vue-select/layout-and-theming) component.
{% endhint %}