UX Select

Lightweight custom select JavaScript plugin (library) created and designed for customizing and improving the native select dropdowns

ux-select description image



Add search by select options for improve usability

Group options

Group related options by only one data attribute

Existing markup

Work with base <select> markup without any additions


Change default localization by attributes or on instance


The plugin (library) weighs less than 20 kilobytes


Instant update native select on user action or method usage


Customize select by replacing CSS-variables in :root element or by using SCSS variables

Future additions

Many new features will be added in the future.


All examples published on StackBlitz and styled by CSS-variables.


Searchable & group options

Styled options




Install from NPM

Install UX Select in your Node.js powered apps with the npm.

npm i ux-select --save

Use via CDN

Add CDN files from jsDelivr to your project.

<link href="" rel="stylesheet" crossorigin="anonymous"/>
<script src="" crossorigin="anonymous"></script>

Download assets

Download files from GitHub and add it locally.

<link href="path/to/ux-select.css" rel="stylesheet" crossorigin="anonymous"/>
<script src="path/to/ux-select.iife.js" crossorigin="anonymous"></script>


ES module

If you prefer ES module, import plugin to your .js file.

Note: It already contains styles.
import UxSelect from "ux-select/dist/js/";


After adding plugin to project, you need to initialize it on <select> element(s), where:

  • element — { HTMLSelectElement }
  • options — { Object | undefined }
const myUxSelect = new UxSelect(element, options);



Name Type Default Description
isSearchable boolean false Set `true` to add search input.
isSearchFocus boolean false Set `true` to add focus search input on open.
isGroupOptions boolean false Set `true` to add grouping options.
Note: Require data-ux-select-group attribute on option(s)
<option data-ux-select-group="groupName"></option>
hideOnClear boolean true Set `false` to disable auto hide on clear.
hideOnSelect boolean false Set `true` to enable auto hide on select option.
optionStyle string 'default' Accept:
'checkbox' for styles like checkbox
'radio' for styles like radio
'image' for add image to option

The image in the option is configured via data attributes:
<option data-image-src="path/to/image.png"></option>
<option data-image-srcset="path/to/image@2x.png"></option>
<option data-image-alt="Image description"></option>
<option data-image-width="24"></option>
<option data-image-height="24"></option>

Text (localization)

Name Type Default Description
placeholder string 'Select an option' Change placeholder text
searchText string 'Search' Change placeholder text on search input
clearText string 'Clear option(s)' Change text on x-mark icon
selectedText string 'Selected:' Change text on multiple select, when user select more than 1 option


After initialize UxSelect we have its initialized instance in variable (like myUxSelect variable in example above) with helpful methods:

Name Description
myUxSelect.disable() Disable select
myUxSelect.enable() Enable select
myUxSelect.update(isTriggerChange) Update UxSelect to match with native select. Pass `false` if you don't need to trigger "change" event on native select.
myUxSelect.clear() Clear selected option(s)



UxSelect includes CSS variables in its compiled for real-time customization without transpiler.

All properties are prefixed with uxs- to avoid conflicts with third party plugins.

Also, you can customize styles by overriding SCSS variables that are in the sources (src/scss directory)


Here is a list of variables that you can change to customize your select
Name Default Description
0.75rem X-oriented padding
0.375rem Y-oriented padding
1px Select border width
solid Select border style
rgb(233 233 233) Select border color
0.375rem Select border radius
rgb(189 193 198) Select border hover color on focus/shown dropdown
1rem Select font size
400 Select font weight
1.5 Select line height
rgb(255 255 255) Select background color
rgb(34 34 34) Select text color
data:image/svg+xml Chevron-down image
data:image/svg+xml Chevron-down image when select disabled
data:image/svg+xml X-mark image for clearing select
data:image/svg+xml X-mark image for clearing select when select disabled
rgb(244 244 244) Options background color on hover
rgb(233 233 233) Options background color on select state
rgb(130 130 130) Options background color on disable state
1px Select styled options(checkbox/radio) outline width
0.25rem Select styled options(checkbox) outline radius
0.1875rem Select styled options(checkbox/radio) border width
rgb(0 224 255) Select styled options(checkbox/radio) background color
rgb(255 255 255) Search input background color
rgb(34 34 34) Search input text color
rgb(169 169 169) Search input placeholder color
0.2s Animation time duration
ease-in-out Animation easing
rgb(189 189 189) Scrollbar track color
rgb(117 117 117) Scrollbar thumb color
rgb(97 97 97) Scrollbar thumb hover color