Enhance & Beautify Select Elements with UX Select Library

Preview:

Description:

UX Select is a lightweight custom select JavaScript plugin designed for customizing and improving the native select dropdowns.

Features:

• Style dropdowns with custom CSS
• Live search/filtering
• Support single or multi-select
• Group related options
• Animate open/close transitions
• Work with existing select markup

Installation:

# NPM
$ npm i ux-select

How to use it:

1. Download the plugin and add the following files to the HTML.

<link rel="stylesheet" href="ux-select.min.css" />
<script src="ux-select.min.iife.js"></script>

// Or as an ES module
import { uxSelect } from "./dist/ux-select.min.umd.cjs";

2. Initialize the UxSelect on your existing select element and done.

<select name="courses" id="demo">
  <option value="java">Java</option>
  <option value="python">Python</option>
  <option value="javascript">JavaScript</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="R">R</option>
  <option value="SQL">SQL</option>
</select>

const element = document.getElementById('demo')
const myUxSelect = new UxSelect(element, {
      // options here
});

3. Group your options using the data-ux-select-group attribute:

<select name="courses" id="demo" multiple>
  <option value="java" data-ux-select-group="programming">Java</option>
  <option value="python" data-ux-select-group="programming">Python</option>
  <option value="javascript" data-ux-select-group="programming">JavaScript</option>
  <option value="html" data-ux-select-group="web">HTML</option>
  <option value="css" data-ux-select-group="web">CSS</option>
  <option value="javascript" data-ux-select-group="web">JavaScript</option>
  <option value="python" data-ux-select-group="Data Science">Python</option>
  <option value="R" data-ux-select-group="Data Science">R</option>
  <option value="SQL" data-ux-select-group="Data Science">SQL</option>
</optgroup>
</select>

const myUxSelect = new UxSelect(element, {
      isGroupOptions: true,
});

4. Enable users to filter through the options via a search box:

const myUxSelect = new UxSelect(element, {
      isSearchable: true,
      isSearchFocus: false, // remove focus on search input
});

5. More configuration options.

const myUxSelect = new UxSelect(element, {
      placeholder: "Select an option",
      searchText: "Search",
      clearText: "Clear option(s)",
      selectedText: "Selected:",
      optionStyle: "checkbox" | "radio" | "default",
});

6. API methods.

myUxSelect.enable()
myUxSelect.disable()
myUxSelect.clear()
myUxSelect.update(isTriggerChange)

Changelog:

v1.6.4 (08/15/2023)

• Fix. Initialization when options is undefined.

v1.6.1 (08/07/2023)

• Added isSearchFocus.
• Removed Input search focus by default.

v1.5.2 (08/07/2023)

• Fix. Input search color.

v1.5.0 (08/05/2023)

• Added: Scrollbar to dropdown.
• Added: Customizing for search input.

v1.3.0 (08/04/2023)

• Added optionStyle parameter
• Bugfix

v1.2.7 (07/31/2023)

• Bugfixes

v1.2.5 (07/30/2023)

• Fix, Types & build for module.