Tom Select

Use this enhanced select component instead of the basic select element to make users choose an options from a larger number of options easily.

Tom Select is an enhanced select UI control. With autocomplete and native-feeling keyboard navigation. Useful for tagging, search large contact list, etc.

We have overridden their legacy styles to match our basic select element style. So, you are ready to get started now.

Rich Select #

Get started with the rich select to let users choose one of some options available. All you need is a basic select element with an additional data-select attribute. Placeholder is also supported.

Form Control #

You should wrap the select element with form-control in order to use the options of the basic select element, like size options and the input groups.

Click to show the entire code

<div class="form-control form-control--lg">
                                        <select data-select data-select-placeholder="Choose from large select">
                                            <option value="">Choose from large select</option>
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                        </select>
                                    </div>
                                    <div class="form-control">
                                        <select data-select data-select-placeholder="Choose from base select">
                                            <option value="">Choose from base select</option>
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                        </select>
                                    </div>
                                    <div class="form-control form-control--sm">
                                        <select data-select data-select-placeholder="Choose from small select">
                                            <option value="">Choose from small select</option>
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                        </select>
                                    </div>

Disabled State #

Follow this examples to apply the disabled option.

Initializing #

You can use one of these two methods to initialize the Tom Select instance.

Via Data Attributes #

The easiest way to initialize the Tom Select instance is by using data attributes. We already gave examples of how to use this method above. If you haven't checked it out yet, just scroll back to the top.

Just set the data-select attribute to the regular select element and you are done. If you want to pass settings, you can add more data-select-{key}="{value}" to it. The value fully supports JSON syntax.

Via Javascript #

Initialize the tomselect instance by calling the RichSelect.createInstance(element, settings) function.

Function	Description
`RichSelect.createInstance(element, options)`	Create a Tom Select instance.
`RichSelect.getInstance(element, options)`	If any, get the Tom Select instance.
`RichSelect.getOrCreateInstance(element, options)`	Get the Tom Select instance if there is one. Create it if necessary.
`RichSelect.destroyInstance(element)`	To destroy a Tom Select instance. Usually called before removing the element.
`RichSelect.dataApi(wrapperElement)`	Execute the Data API within the specified `wrapperElement`.

API #

If you need more than that, please check out their official docs directly. There are more examples that you can try out as well.

Messages

Notifications