Multi Select input is always one of the trickiest component in frontend. The complexity increases if you are creating a custom component for your project but require all native things like press tab to navigate, disabled, hover, focus etc. In this article we will gonna learn about Choices which a lightweight pure JavaScript library with a lot of handy multi select input features.

What is Choices.js ?

Its a pure JS library with configurable multi select input support. The reason behind why choices.js is so good is that it’s don’t depends on jquery.

Which results in lightweight size and super fast api. It supports flexible styling out of box so that you can give it your own look and feel. Super fast searching and filtering. It’s also supports right to left layout.

Installation and Usage

Like any other packages you can install it from npm, yarn and cdn.

With NPM:

npm install choices.js

With Yarn:

yarn add choices.js

From a CDN:

<!-- Include base CSS (optional) -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/base.min.css"
/>
<!-- Or versioned -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/base.min.css"
/>

<!-- Include Choices CSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"
/>
<!-- Or versioned -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css"
/>

<!-- Include Choices JavaScript (latest) -->
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<!-- Or versioned -->
<script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>

Usage

First of all we need to import choices and its styling.

import Choices from "choices.js";
import "choices.js/public/assets/styles/choices.min.css";
// import "choices.js/public/assets/styles/base.min.css";

So let’s assume we have an input tag something like this.

<input class="form-control" id="choices-text-remove-button" type="text" value="preset-1,preset-2" placeholder="Enter something" />

Now we want to add press enter to add value functionality.

We can import our choices and then we can pass our input ref to choicesjs.



 useEffect(() => {
    new Choices(document.getElementById("choices-text-remove-button"), {
      delimiter: ",",
      editItems: true,
      maxItemCount: 5,
      removeItemButton: true
    });
  }, []);

And you will get this output.

Full code of component.

import React, { useEffect } from "react";
import Choices from "choices.js";
// import "choices.js/public/assets/styles/base.min.css";
import "choices.js/public/assets/styles/choices.min.css";

import "./styles.css";

export default function App() {
  useEffect(() => {
    new Choices(document.getElementById("choices-text-remove-button"), {
      delimiter: ",",
      editItems: true,
      maxItemCount: 5,
      removeItemButton: true
    });
  }, []);
  return (
    <div className="App">
      <input
        class="form-control"
        id="choices-text-remove-button"
        type="text"
        value="preset-1,preset-2"
        placeholder="Enter something"
      />
    </div>
  );
}

Checkout codesandbox demo.

Edit 41tkt

Feel free to write your thoughts in the comment section.

Docs

Jump.js a modern smooth scrolling library

Categories: Reactjs

1 Comment

Visualize your React app using React Sight - Blog React · October 5, 2020 at 3:37 am

[…] How to use Choices.js with React for multi select input […]

Comments are closed.