Enhance & Beautify Select Elements with UX Select Library

Category: Form , Javascript | August 15, 2023
Views Total:79 views
Official Page:Go to website
Last Update:August 15, 2023


Enhance & Beautify Select Elements with UX Select Library


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


  • 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


$ 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>
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>
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.



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.

You Might Be Interested In:

Leave a Reply