Published on

How To Make A Multi Select With Tailwind CSS In 6 Easy Steps?

Multi select

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to help you quickly build custom user interfaces. It allows you to design complex layouts and components without writing any custom CSS code. With Tailwind CSS, you can create responsive and mobile-first designs that are easy to maintain and scale.

The description of Multi select ui component

A multi select UI component is a user interface element that allows users to select multiple options from a list of choices. It is commonly used in forms, where users need to select multiple items from a set of options. A multi select component can improve the user experience by providing an intuitive and efficient way to select multiple options.

Why use Tailwind CSS to create a Multi select ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to create a multi select UI component quickly and easily. These classes can be combined to create custom styles that match the design of your website or application. Using Tailwind CSS can save you time and effort in designing and implementing a multi select component.

The preview of Multi select ui component

To create a multi select UI component with Tailwind CSS, you can use a combination of HTML and CSS classes. Here is a preview of what the final component will look like:

Free download of the Multi select's source code

The source code of Multi select ui component

To create a multi select UI component with Tailwind CSS, you can use the following HTML and CSS code:

<style>
    .top-100 {top: 100%}
    .bottom-100 {bottom: 100%}
    .max-h-select {
        max-height: 300px;
    }
</style>

<div class="w-full md:w-1/2 flex flex-col items-center h-64 mx-auto">
    <div class="w-full px-4">
        <div class="flex flex-col items-center relative">
            <div class="w-full  svelte-1l8159u">
                <div class="my-2 p-1 flex border border-gray-200 bg-white rounded svelte-1l8159u">
                    <div class="flex flex-auto flex-wrap">
                        <div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
                            <div class="text-xs font-normal leading-none max-w-full flex-initial">HTML</div>
                            <div class="flex flex-auto flex-row-reverse">
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
                            <div class="text-xs font-normal leading-none max-w-full flex-initial">Ruby</div>
                            <div class="flex flex-auto flex-row-reverse">
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
                            <div class="text-xs font-normal leading-none max-w-full flex-initial">Javascript</div>
                            <div class="flex flex-auto flex-row-reverse">
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1">
                            <input placeholder="" class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800">
                        </div>
                    </div>
                    <div class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200 svelte-1l8159u">
                        <button class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up w-4 h-4">
                                <polyline points="18 15 12 9 6 15"></polyline>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            <div class="absolute shadow top-100 bg-white z-40 w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj">
                <div class="flex flex-col w-full">
                    <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100">
                        <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                            <div class="w-full items-center flex">
                                <div class="mx-2 leading-6  ">Python </div>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
                        <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative border-teal-600">
                            <div class="w-full items-center flex">
                                <div class="mx-2 leading-6  ">Javascript </div>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
                        <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative border-teal-600">
                            <div class="w-full items-center flex">
                                <div class="mx-2 leading-6  ">Ruby </div>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
                        <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                            <div class="w-full items-center flex">
                                <div class="mx-2 leading-6  ">JAVA </div>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
                        <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                            <div class="w-full items-center flex">
                                <div class="mx-2 leading-6  ">ASP.Net </div>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
                        <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                            <div class="w-full items-center flex">
                                <div class="mx-2 leading-6  ">C++ </div>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
                        <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                            <div class="w-full items-center flex">
                                <div class="mx-2 leading-6  ">SQL </div>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer w-full border-gray-100 rounded-b hover:bg-teal-100">
                        <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative border-teal-600">
                            <div class="w-full items-center flex">
                                <div class="mx-2 leading-6  ">HTML </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

How to create a Multi select with Tailwind CSS?

Here are the steps to create a multi select UI component with Tailwind CSS:

Step 1: Create the HTML structure

The first step is to create the HTML structure for the multi select component. You can use the <select> and <option> tags to create a list of options that the user can select from. Here is an example:

<div class="relative">
  <select multiple class="appearance-none bg-gray-100 border border-gray-300 rounded-md py-2 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
  <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
    <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
      <path fill-rule="evenodd" d="M15 10a5 5 0 11-10 0 5 5 0 0110 0zm-5-7a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd"/>
    </svg>
  </div>
</div>

In this example, we have used the select tag with the multiple attribute to allow the user to select multiple options. We have also added some Tailwind CSS classes to style the component.

Step 2: Style the component

The next step is to style the multi select component using Tailwind CSS classes. Here is an example of some CSS classes that can be used to style the component:

/* Style the select box */
.appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Style the selected options */
.select-selected {
  background-color: DodgerBlue;
  color: white;
}

/* Style the dropdown button */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Style the dropdown content */
.select-items {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
}

/* Style the options */
.select-items div {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;
}

/* Style the selected options */
.select-items div:hover, .same-as-selected {
  background-color: #f5f5f5;
}

In this example, we have used some Tailwind CSS classes to style the select box, selected options, dropdown button, dropdown content, and options.

Step 3: Add JavaScript functionality

The next step is to add JavaScript functionality to the multi select component. This will allow the user to select and deselect options. Here is an example of some JavaScript code that can be used to add this functionality:

var x, i, j, selElmnt, a, b, c;
/* Look for any elements with the class "custom-select": */
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /* For each element, create a new DIV that will act as the selected item: */
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /* For each element, create a new DIV that will contain the option list: */
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /* For each option in the original select element,
    create a new DIV that will act as an option item: */
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /* When an item is clicked, update the original select box,
        and the selected item: */
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
    /* When the select box is clicked, close any other select boxes,
    and open/close the current select box: */
    e.stopPropagation();
    closeAllSelect(this);
    this.nextSibling.classList.toggle("select-hide");
    this.classList.toggle("select-arrow-active");
  });
}

function closeAllSelect(elmnt) {
  /* A function that will close all select boxes in the document,
  except the current select box: */
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}

/* If the user clicks anywhere outside the select box,
then close all select boxes: */
document.addEventListener("click", closeAllSelect);

In this example, we have used JavaScript to create a custom select box that allows the user to select and deselect options.

Step 4: Customize the component

The next step is to customize the multi select component to match the design of your website or application. You can use Tailwind CSS classes to change the colors, fonts, and layout of the component. Here are some examples:

/* Change the background color */
.bg-blue-500 {
  background-color: #3b82f6;
}

/* Change the font size */
.text-lg {
  font-size: 1.125rem;
}

/* Change the border radius */
.rounded-full {
  border-radius: 9999px;
}

Step 5: Test the component

The next step is to test the multi select component to ensure that it works correctly. You can test the component by selecting and deselecting options and ensuring that the selected options are displayed correctly.

Step 6: Deploy the component

The final step is to deploy the multi select component to your website or application. You can add the HTML, CSS, and JavaScript code to your project and ensure that it works correctly in all browsers and devices.

Conclusion

In this article, we have learned how to create a multi select UI component with Tailwind CSS in 6 easy steps. We have seen how Tailwind CSS can be used to quickly and easily create custom user interfaces without writing any custom CSS code. We have also seen how JavaScript can be used to add functionality to the component. By following these steps, you can create a multi select component that improves the user experience and makes your website or application more user-friendly.