1. Plugins
  3. Advanced Select

Plugins

Tailwind CSS Advanced Select

Advanced select solutions for massive datasets.

Image Description

Installation

To get started, install Advanced Select plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/select

Example

Here is a basic example of a select with advanced features.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <select data-hs-select='{
                            "placeholder": "Select option...",
                            "toggleTag": "<button type=\"button\"></button>",
                            "toggleClasses": "",
                            "dropdownClasses": "",
                            "optionClasses": "hs-selected:"
                          }'>
                          <option>Select option</option>
                          <option>Name</option>
                          <option>Email address</option>
                          <option>Description</option>
                          <option>User ID</option>
                        </select>

Options

Name Description Options Default value
data-hs-select Activate a Custom Select by specifying on an element — —
:isOpened Opens the select if the value is true. boolean false
:placeholder Define a default placeholder when nothing is selected. string Select...
:hasSearch Define a search field inside the dropdown if the value is true. boolean false
:mode Define a select mode. 'default' | 'tags' default
:toggleTag Define a markup for the select toggle. One line HTML markup —
:toggleClasses Define CSS classes for the selects' toggle. CSS classes that separated with space. string —
:toggleCountText This option is only available for multiple select. Determines what text will be after the counter. It also activates the counting mode. string —
:toggleCountTextMinItems This option is only available for multiple select. Defines the minimum number of selected items at which the counting mode will be activated. number 1
:tagsClasses This option is only available when tags mode is set up. Define CSS classes for the tags' wrapper. CSS classes that separated with space. string —
:tagsItemTemplate This option is only available when tags mode is set up. Define template for the single tag. It could contain:
  • data-icon if target option tag has data-hs-select-option:icon, that this image will be inside the tag with this data attribute.
  • data-title the text from the target option will be inside the tag with this data attribute.
  • data-remove the target tag will be deleted when click on tag with this data attribute.
 One line HTML markup —
:tagsItemClasses This option is only available when tags mode is set up. Define CSS classes for the single tags. CSS classes that separated with space. string —
:tagsInputClasses This option is only available when tags mode is set up. Define CSS classes for the input. CSS classes that separated with space. string —
:dropdownTag This option is only available when tags mode is set up. Define a markup for the dropdown. One line HTML markup —
:dropdownClasses This option is only available when tags mode is set up. Define CSS classes for the dropdown. CSS classes that separated with space. string —
:searchClasses This option is only available when :hasSearch attribute is true. Define CSS classes for the search field inside the dropdown. CSS classes that separated with space. string block w-[calc(100%-2rem)] text-sm border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 py-2 px-3 my-2 mx-4
:searchPlaceholder This option is only available when :hasSearch attribute is true. Determines placeholder for the search field inside the dropdown. string Search...
:optionTemplate Define template for the single option. It could contain:
  • data-icon if target option tag has data-hs-select-option:icon, that this image will be inside the tag with this data attribute.
  • data-title the text from the target option will be inside the tag with this data attribute.
  • data-description if target option tag has data-hs-select-option:description, that this text will be inside the tag with this data attribute.
 One line HTML markup —
:optionTag Define a markup for the single option. One line HTML markup —
:optionClasses Define CSS classes for the single option. CSS classes that separated with space. string —
:descriptionClasses Define CSS classes for the description inside the single option. CSS classes that separated with space. string —
:iconClasses Define CSS classes for the icon inside the single option. CSS classes that separated with space. string —

Classes

Name Description
hs-select-opened: A modifier that allows you to set Tailwind classes when select has been opened.
hs-select-disabled: A modifier that allows you to set Tailwind classes when select has "disabled" attribute.

Methods

The HSSelect object is contained within the global window object

Method Description
Public methods
open() Open dropdown list.
close() Close dropdown list.
recalculateDirection() Force recalculation for dropdown list.
Static methods
HSSelect.getInstance(target, isInstance) Returns the element associated to the target.
  • target should be a Node or string (valid selector)
  • isInstance boolean. Returns the instance instead of Node if true
HSSelect.close(target) Closes the element associated to the target.
  • target should be a Node or string (valid selector)
HSSelect.closeCurrentlyOpened(evtTarget) Closes the opened element associated to the target.
  • target should be a Node

Open item (public method).

                      
                        const select = new HSSelect(document.querySelector('#select'));
                        const openBtn = document.querySelector('#open-btn');

                        openBtn.addEventListener('click', () => {
                          select.open();
                        });

Open item (static method).

                      
                        const openBtn = document.querySelector('#open-btn');

                        openBtn.addEventListener('click', () => {
                          HSSelect.open('#select');
                        });

Open item (mixed).

                      
                        const { element } = HSSelect.getInstance('#select', true);
                        const openBtn = document.querySelector('#open-btn');

                        openBtn.addEventListener('click', () => {
                          element.open();
                        });

Events

Method Description Returning value
on:change Called when any select was changed. Current value

When select changes event example.

                      
                        const el = HSSelect.getInstance('#select');

                        el.on('change', (val) => {...});

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Image Description
Check out Preline UI Advanced Select