Search
Add search by select options for improve usability
UX Select
Lightweight custom select JavaScript plugin (library) created and designed for customizing and improving the native select dropdowns
Features
Group options
Group related options by only one data attribute
Existing markup
Work with base <select> markup without any additions
Localization
Change default localization by attributes or on instance
Lightweight
The plugin (library) weighs less than 20 kilobytes
Update
Instant update native select on user action or method usage
Styling
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.
Examples
All examples published on StackBlitz and styled by CSS-variables.
Default
Searchable & group options
Styled options
Localization
Methods
Installation
Install from NPM
Install UX Select in your Node.js powered apps with the npm.
npm i ux-select --saveUse via CDN
Add CDN files from jsDelivr to your project.
<link href="https://cdn.jsdelivr.net/npm/ux-select@2.1.1/dist/css/ux-select.css" rel="stylesheet" crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/ux-select@2.1.1/dist/js/ux-select.iife.js" 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>Usage
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/ux-select.es.js";Initialization
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);Parameters
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) |
| 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: |
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 |
Methods
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) |
Styling
Overview
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)
Variables
Here is a list of variables that you can change to customize your select
| Name | Default | Description |
|---|---|---|
|
--uxs-padding-x ($uxs-padding-x) |
0.75rem | X-oriented padding |
|
--uxs-padding-y ($uxs-padding-y) |
0.375rem | Y-oriented padding |
|
--uxs-border-width ($uxs-border-width) |
1px | Select border width |
|
--uxs-border-style ($uxs-border-style) |
solid | Select border style |
|
--uxs-border-color ($uxs-border-color) |
rgb(233 233 233) | Select border color |
|
--uxs-border-radius ($uxs-border-radius) |
0.375rem | Select border radius |
|
--uxs-border-hover-color ($uxs-border-hover-color) |
rgb(189 193 198) | Select border hover color on focus/shown dropdown |
|
--uxs-font-size ($uxs-font-size) |
1rem | Select font size |
|
--uxs-font-weight ($uxs-font-weight) |
400 | Select font weight |
|
--uxs-line-height ($uxs-line-height) |
1.5 | Select line height |
|
--uxs-background-color ($uxs-background-color) |
rgb(255 255 255) | Select background color |
|
--uxs-text-color ($uxs-text-color) |
rgb(34 34 34) | Select text color |
|
--uxs-dropdown-image ($uxs-dropdown-image) |
data:image/svg+xml | Chevron-down image |
|
--uxs-dropdown-image-disable ($uxs-dropdown-image-disable) |
data:image/svg+xml | Chevron-down image when select disabled |
|
--uxs-clear-image ($uxs-clear-image) |
data:image/svg+xml | X-mark image for clearing select |
|
--uxs-clear-image-disable ($uxs-clear-image-disable) |
data:image/svg+xml | X-mark image for clearing select when select disabled |
|
--uxs-option-hovered-bg-color ($uxs-option-hovered-bg-color) |
rgb(244 244 244) | Options background color on hover |
|
--uxs-option-selected-bg-color ($uxs-option-selected-bg-color) |
rgb(233 233 233) | Options background color on select state |
|
--uxs-option-disabled-color ($uxs-option-disabled-color) |
rgb(130 130 130) | Options background color on disable state |
|
--uxs-option-styled-outline-width ($uxs-option-styled-outline-width) |
1px | Select styled options(checkbox/radio) outline width |
|
--uxs-option-styled-checkbox-outline-radius ($uxs-option-styled-checkbox-outline-radius) |
0.25rem | Select styled options(checkbox) outline radius |
|
--uxs-option-styled-border-width ($uxs-option-styled-border-width) |
0.1875rem | Select styled options(checkbox/radio) border width |
|
--uxs-option-styled-background-color ($uxs-option-styled-background-color) |
rgb(0 224 255) | Select styled options(checkbox/radio) background color |
|
--uxs-search-background-color ($uxs-search-background-color) |
rgb(255 255 255) | Search input background color |
|
--uxs-search-text-color ($uxs-search-text-color) |
rgb(34 34 34) | Search input text color |
|
--uxs-search-placeholder-color ($uxs-search-placeholder-color) |
rgb(169 169 169) | Search input placeholder color |
|
--uxs-transition-duration ($uxs-transition-duration) |
0.2s | Animation time duration |
|
--uxs-transition-easing ($uxs-transition-easing) |
ease-in-out | Animation easing |
|
--uxs-scrollbar-track-color ($uxs-scrollbar-track-color) |
rgb(189 189 189) | Scrollbar track color |
|
--uxs-scrollbar-thumb-color ($uxs-scrollbar-thumb-color) |
rgb(117 117 117) | Scrollbar thumb color |
|
--uxs-scrollbar-thumb-hover-color ($uxs-scrollbar-thumb-hover-color) |
rgb(97 97 97) | Scrollbar thumb hover color |