tail.select

Replace and improve your HTML

A few notable features:

tail.select - Create beautiful multiselect fields with vanilla JavaScript. | Product Hunt

tail.select

Enabling a dropdown is as easy as 🍦 Vanilla JavaScript -

tail.select(".select");

The tail.select script is back, re-written in vanilla JavaScript and ready to beautify and extend your HTML <select> fields... again! Add a search bar, multi-selection utilities (such as select all or none buttons), deselectability on single select fields, a perfect design and many more user-friendly functions to your web-application.

A beautiful Select Field

The tail.select fields below shows you the absolute standard, without any settings!

Single
Multiple
HTML Structure
<select class="select" multiple>
        <option>[...]</option>
        <option>[...]</option>
        <option>[...]</option>
    </select>
JavaScript Code
tail.select(".select");

A grouped Select Field

It goes on without any setting, but with some more HTML Code to define some optgroup stuff!

Single
Multiple
HTML Structure
<select class="select" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select");

A finding Select Field

Our first line of (JavaScript) code enables the search field within the dropdown element.

Single Search
Multiple Search
HTML Structure
<select class="select-search" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select-search", {
        search: true
    });

A descriptive Select Field

Just one option and some HTML stuff more and tail.select allows us some descriptive text.

Single Descriptions
Multiple Descriptions
HTML Structure
<select class="select-descriptions" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select-descriptions", {
        search: true,
        descriptions: true,
    });

A limitable Select Field

You can allow to deselect single select fields, and you can limit the selection on multiple ones.

DeSelectable Single
Limit Multiple
HTML Structure
<select class="select-[...]" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select-deselect", {
        search: true,
        descriptions: true,
        deselect: true,
    });
    tail.select(".select-limit", {
        search: true,
        descriptions: true,
        multiLimit: 10
    });

A movable Select Field

It is also possible to move your selections to an existing container elsewhere and hide the respective options within the dropdown field.

Move to an external Container
Move to the Label
HTML Structure
<select class="select-[...]" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select-deselect", {
        search: true,
        descriptions: true,
        hideSelected: true,
        hideDisabled: true,
        multiLimit: 15,
        multiShowCount: false,
        multiContainer: ".tail-move-container"
    });
    tail.select(".select-limit", {
        search: true,
        descriptions: true,
        hideSelected: true,
        hideDisabled: true,
        multiLimit: 15,
        multiShowCount: false,
        multiContainer: true
    });

A manipulatable Select Field

A small example to show the power of the tail.select.options class.


A hackable Select Field

The magic of Hooks and Callbacks.