Tom Select

  1. Forms
  2. Tom Select

Custom Option and Item HTML

This example provides a simple demonstration of how to override the default templates for options and items along with proper use of the escape() method.

HTML Preview
<select id="select-links" multiple placeholder="Pick some links..."></select>
Javascript Preview
new TomSelect('#select-links', {
    valueField: 'id',
    searchField: 'title',
    options: [
    { id: 1, title: 'DIY', url: 'https://diy.org' },
    { id: 2, title: 'Google', url: 'http://google.com' },
    { id: 3, title: 'Yahoo', url: 'http://yahoo.com' },
    ],
    render: {
    option: function (data, escape) {
        return '
' +
            '' + escape(data.title) + '' +
            '' + escape(data.url) + '' +
            '
';
        },
        item: function (data, escape) {
            return '
' + escape(data.title) + '
';
        }
    }
});

Email Contacts

An example showing how you might go about creating contact selector like those used in Email apps.

HTML Preview
<select id="select-to" class="contacts" placeholder="Pick some people..."></select>
Javascript Preview
var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
    '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';

var formatName = function (item) {
    return ((item.first || '') + ' ' + (item.last || '')).trim();
};

new TomSelect('#select-to', {
    persist: false,
    maxItems: null,
    valueField: 'email',
    labelField: 'name',
    searchField: ['first', 'last', 'email'],
    sortField: [
        { field: 'first', direction: 'asc' },
        { field: 'last', direction: 'asc' }
    ],
    options: [
        { email: 'nikola@tesla.com', first: 'Nikola', last: 'Tesla' },
        { email: 'brian@thirdroute.com', first: 'Brian', last: 'Reavis' },
        { email: 'someone@gmail.com' },
        { email: 'example@gmail.com' },
    ],
    render: {
        item: function (item, escape) {
            var name = formatName(item);
            return '
' +
                (name ? '' + escape(name) + '' : '') +
                (item.email ? '' : '') +
                '
';
        },
        option: function (item, escape) {
            var name = formatName(item);
            var label = name || item.email;
            var caption = name ? item.email : null;
            return '
' +
                '' + escape(label) + '' +
                (caption ? '' + escape(caption) + '' : '') +
                '
';
        }
    },
    createFilter: function (input) {
        var regexpA = new RegExp('^' + REGEX_EMAIL + '$', 'i');
        var regexpB = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
        return regexpA.test(input) || regexpB.test(input);
    },
    create: function (input) {
        if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
            return { email: input };
        }
        var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
        if (match) {
            var name = match[1].trim();
            var pos_space = name.indexOf(' ');
            var first = name.substring(0, pos_space);
            var last = name.substring(pos_space + 1);

            return {
                email: match[2],
                first: first,
                last: last
            };
        }
        alert('Invalid email address.');
        return false;
    }
});

Browser Defaults Validation

Browsers will prevent users from submitting this form unless the <select required> field has a value. Your browser may display a message along the lines of "Please fill out this field" when trying to submit the form.

HTML Preview
<form>
    <select id="select-person" placeholder="Select a person..." required>
        <option value="">Select a person...</option>
        <option value="4">Thomas Edison</option>
        <option value="1">Nikola</option>
        <option value="3">Nikola Tesla</option>
        <option value="5">Arnold Schwarzenegger</option>
    </select>
    <div class="py-3">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>
Javascript Preview
// Browser Defaults
new TomSelect('#select-person', {
    create: true,
    sortField: {
        field: 'text',
        direction: 'asc'
    }
});

Bootstrap Validation

With a few changes, you can enhance your communication with features provided by frameworks like Bootstrap.

Please select a person
HTML Preview
<form id="bootstrap-form" novalidate>
    <select class="form-select" id="select-bootstrap" required placeholder="Select a person..." name="beast">
        <option value="">Select a person...</option>
        <option value="4">Thomas Edison</option>
        <option value="1">Nikola</option>
        <option value="3">Nikola Tesla</option>
        <option value="5">Arnold Schwarzenegger</option>  
    </select>
    <div class="invalid-feedback">
        Please select a person
    </div>
    <div class="py-3">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>
Javascript Preview
//bootstrap validation
var my_select = new TomSelect('#select-bootstrap');

// Example starter JavaScript for disabling form submissions if there are invalid fields
var form = document.getElementById('bootstrap-form')
form.addEventListener('submit', function (event) {

    // add was-validated to display custom colors
    form.classList.add('was-validated')

    if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
    }

}, false)

Pattern Attribute

With a few changes, you can enhance your communication with features provided by frameworks like Bootstrap.

HTML Preview
<form id="bootstrap-form" novalidate>
    <select class="form-select" id="select-bootstrap" required placeholder="Select a person..." name="beast">
        <option value="">Select a person...</option>
        <option value="4">Thomas Edison</option>
        <option value="1">Nikola</option>
        <option value="3">Nikola Tesla</option>
        <option value="5">Arnold Schwarzenegger</option>  
    </select>
    <div class="invalid-feedback">
        Please select a person
    </div>
    <div class="py-3">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>
Javascript Preview
//bootstrap validation
var my_select = new TomSelect('#select-bootstrap');

// Example starter JavaScript for disabling form submissions if there are invalid fields
var form = document.getElementById('bootstrap-form')
form.addEventListener('submit', function (event) {

    // add was-validated to display custom colors
    form.classList.add('was-validated')

    if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
    }

}, false)

Data-* Attributes

Images can be added to option and item elements with custom render templates and data-* attributes

HTML Preview
<select id="data-attr">
    <option value="chrome" data-src="https://cdn1.iconfinder.com/data/icons/logotypes/32/chrome-32.png">Google Chrome</option>
    <option value="ffox" data-src="https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-32.png">Mozilla Firefox</option>
    <option value="ie" data-src="https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-32.png">Internet Explorer</option>
</select>
Javascript Preview
new TomSelect('#data-attr',{
    render: {
        option: function (data, escape) {
            return `<div><img class="me-2" src="${data.src}">${data.text}</div>`;
        },
        item: function (item, escape) {
            return `<div><img class="me-2" src="${item.src}">${item.text}</div>`;
        }
    }
});

Flag Lists

*Images can be added to option and item elements with custom render templates and data-* attributes

HTML Preview
<select id="data-flag">
    <option value="Ascension Island" data-src="assets/images/flags/ac.svg">Ascension Island</option>
    <option value="Andorra" data-src="assets/images/flags/ad.svg">Andorra</option>
    <option value="United Arab Emirates" data-src="assets/images/flags/ae.svg">United Arab Emirates</option>
    <option value="Afghanistan" data-src="assets/images/flags/af.svg">Afghanistan</option>
</select>
Javascript Preview
new TomSelect('.data-flag', {
    render: {
        option: function (data, escape) {
            return `<div><img class="me-2 avatar-xxs rounded" src="${data.src}">${data.text}</div>`;
        },
        item: function (item, escape) {
            return `<div><img class="me-2 avatar-xxs rounded" src="${item.src}">${item.text}</div>`;
        }
    }
});