Easy Customization Of HTML Select Boxes – nice-select2

Preview:

Description:

A pretty nice select box replacement library that converts the regular select element into an animated, customizable, searchable dropdown list.

How to use it:

1. Import the nice-select2 plugin’s JavaScript and Stylesheet into the document.

<link href="dist/css/nice-select2.css" rel="stylesheet" />
<script src="dist/js/nice-select2.js"></script>

// OR 
# NPM
$ npm i nice-select2

import NiceSelect from "nice-select2";
@import "~nice-select2/dist/css/nice-select2.css"

2. Just attach the function NiceSelect to the existing select element and done.

<select id="example">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

NiceSelect.bind(document.getElementById("example"));

3. Full options to customize the dropdown.

NiceSelect.bind(document.getElementById("example"),{
  data: null,
  showSelectedItems: true,
  placeholder: "Select an option",
  searchtext: "Search",
  selectedtext: "selected",
  hideSelect: true
});

5. API methods.

instance.update();
instance.focus();
instance.enable();
instance.disable();
instance.clear();
instance.destroy();

Changelog:

v2.4.1 (08/27/2025)

• Replaced innerHTML with element creations
• Fixed syncSelectValue() for data-display

v2.4.0 (07/24/2025)

• showSelectedItems is now true by default.
• Css no longer imported into js.
• If showSelectedItems is true and multiple selection are allowed, an overview with selected options is show include a remove button on each.
• An update to the select now automatically updates the dropdown.
• Update project dependencies, fix deprecated SASS build warnings, and upgrade to modern JavaScript and SASS syntax. Optimize for bundle size and overall performance.
• Add support for extra content in dropdown items using the data-extra attribute.
• Implement placeholder, search text, and selected text customization through attributes or configuration options.

v2.3.1 (02/04/2025)

• [FIX] Method .clear needs to deselect options.

v2.1.0 (01/26/2023)

• [FIX] Method .clear needs to deselect options.
• Added option to show selected items
• Fixed a bug in which the selection was not made even if it was selected again.
• fixed: issue when first option was always selected

v2.0.0 (01/14/2023)

• This release makes it possible to include nice-select2 in your webpack import
• added: invalid and valid class
• bugfixes

12/22/2021

• update

10/12/2021

• update

10/10/2021

• clean dependency

09/25/2021

• JS updated