Skip to main content

Simple Multi-Select

A library to create simple multiple select elements. These multiple selects look similar to the native select element, but allow users to choose multiple options.

This library uses both JavaScript and CSS. There are several CSS Variables available to customize the look of the multiple select.

How It Works​

This library works by looking for native multiple select elements on a page and changing them into an easier to use multiple select. The native select element is hidden and a new element is created to replace it.

Attributes set on the native select are used to drive how the new multiple select works.

Demo​

This is a small demo of Simple Multi-Select in action to give an idea on how it works.

Installation​

npm install @simple-web-utilities/simple-multi-select

Getting Started​

To get started make sure that you include the CSS and JavaScript on your page or into your project files.

HTML​

The HTML for the multiple select is very simple. It is just a native select element with the multiple attribute set.

<select multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

For details about the available attributes and other options check out the HTML Options.

CSS​

You can link to the css file directly or import it into your own css file.

note

It is encouraged to import the library into your own css file.

<link rel="stylesheet" href="node_modules/@simple-web-utilities/simple-multi-select/dist/simple-multi-select.css" />

For more options on customizing the CSS check out the available CSS Variables.

Dark Mode​

This library supports dark mode by setting the data-theme attribute on the html element. The default theme is light. To use the dark theme set the data-theme attribute to dark.

<html data-theme="dark">

JavaScript​

Once you have the HTML for your multi-select element, the JavaScript need to be added to the page. This library is available as an ES Module and a UMD module.

import {MultiSelect, InitializeAllMultiSelects} from "@simple-web-utilities/simple-multi-select";

Details about how to initialize the multi-selects and the available options can be found in the JavaScript Options.