# select2tokenizer

Since V1.1.0

Select2Tokenizer is a component which allow the user to select multiple values as 'tokens' from a search field. The component is implemented on top of the [Select2](https://select2.github.io/examples.html#tokenizer) library.

{% hint style="info" %}
*<mark style="color:blue;">**Content under construction**</mark>*
{% endhint %}

## Table of contents

* [Styling Select2Tokenizer](#styling-select2tokenizer)
* [Select2Tokenizer Properties](#select2tokenizer-properties)
* [Select2Tokenizer Events](#select2tokenizer-events)
* [Select2Tokenizer API](#select2tokenizer-api)

## Styling Select2Tokenizer

The component has it's own CSS selector to be used for the restyle of the component. Note that fine-grained styling of the component is depending on the internal selectors of the select2 libary

| element selector                     | summary                                   |
| ------------------------------------ | ----------------------------------------- |
| .svy-select2-autotokenizer           | style the select2tokenizer                |
| .svy-select2-autotokenizer-container | style the select2tokenizer tags container |
| .svy-select2-autotokenizer-dropdown  | style the select2tokenizer dropdown       |

#### Sizing

To adjust the Select2Tokenizer size, apart from stylying the component with your own CSS, you can use one the control size classes; the Select2Tokenizer offers 4 control size classes. Please note that each size class requires a certain height of the component for nice stylying and to avoid vertical scrollbars. To use the size classes just add one of them into the component's styleClass property. Default size class is select2-sm.

| size class | min-height | font-size |
| ---------- | :--------: | --------- |
| select2-xs |    20px    | 12px      |
| select2-sm |    32px    | 14px      |
| select2-md |    36px    | 16px      |
| select2-lg |    44px    | 18px      |

## Select2Tokenizer Properties

Select2Tokenizer properties can be found [here](/reference/servoyextensions/ui-components/input-control/select2tokenizer.md#properties).

## Select2Tokenizer Events

Select2Tokenizer events can be found [here](/reference/servoyextensions/ui-components/input-control/select2tokenizer.md#events).

## Select2Tokenizer API

Select2Tokenizer API methods can be found [here](/reference/servoyextensions/ui-components/input-control/select2tokenizer.md#api).

## Related Articles

The following articles are recommended for additional reading

* [Select2Tokenizer Reference Documentation](/reference/servoyextensions/ui-components/input-control/select2tokenizer.md)
* [Styling and Themes](/guides/develop/application-design/styling-and-themes.md)
* [Scripting the UI](/guides/develop/programming-guide/scripting-the-ui.md)


---

# 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://docs.servoy.com/guides/develop/application-design/ui-components/input-controls/select2tokenizer.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.