diff --git a/docs/multi-select.gif b/docs/multi-select.gif
new file mode 100644
index 0000000..51b61d8
Binary files /dev/null and b/docs/multi-select.gif differ
diff --git a/docs/multi-select.md b/docs/multi-select.md
new file mode 100644
index 0000000..3918716
--- /dev/null
+++ b/docs/multi-select.md
@@ -0,0 +1,75 @@
+# Multi-select Component
+
+![multi-select](multi-select.gif)
+
+## Usage
+
+```javascript
+import { MultiSelect } from 'tailwindcss-stimulus-components'
+application.register('multi-select', MultiSelect)
+```
+
+```html
+<div data-controller="multi-select" class="relative">
+  <div
+    data-action="click->multi-select#toggle"
+    class="border rounded-md p-3 bg-white shadow-md cursor-pointer"
+  >
+    <input
+      readonly
+      name="selected_tag_names"
+      data-multi-select-target="selectedItems"
+      class="text-gray-600"
+      placeholder="Select options"
+    />
+  </div>
+  <div
+    data-multi-select-target="options"
+    class="absolute left-0 right-0 mt-1 hidden bg-white border rounded-md shadow-lg z-10"
+  >
+    <div class="p-2">
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          value="Option 1"
+          data-action="change->multi-select#updateSelection"
+          class="mr-2"
+        />
+        Option 1
+      </label>
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          value="Option 2"
+          data-action="change->multi-select#updateSelection"
+          class="mr-2"
+        />
+        Option 2
+      </label>
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          value="Option 3"
+          data-action="change->multi-select#updateSelection"
+          class="mr-2"
+        />
+        Option 3
+      </label>
+    </div>
+  </div>
+</div>
+```
+
+Multi-select options are set up to toggle on click. Selected options may be accessed as a concatenated string returned from this input.
+
+```html
+<input
+  readonly
+  name="selected_tag_names"
+  data-multi-select-target="selectedItems"
+  class="text-gray-600"
+  placeholder="Select options"
+/>
+```
+
+Selected options read from memory will be automatically checked.
diff --git a/index.html b/index.html
index 45f9848..5ef555f 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TailwindCSS Stimulus Components</title>
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
     <script>
@@ -20,116 +20,188 @@
     </script>
 
     <script type="module">
-      import { Application } from "@hotwired/stimulus";
-      import { Alert, ColorPreview, Dropdown, Modal, Popover, Slideover, Tabs, Toggle } from "tailwindcss-stimulus-components";
-
-      (() => {
-        const application = Application.start();
-        application.register('alert', Alert);
-        application.register('color-preview', ColorPreview);
-        application.register('dropdown', Dropdown);
-        application.register('modal', Modal);
-        application.register('popover', Popover);
-        application.register('slideover', Slideover);
-        application.register('tabs', Tabs);
-        application.register('toggle', Toggle);
+      import { Application } from '@hotwired/stimulus'
+      import {
+        Alert,
+        ColorPreview,
+        Dropdown,
+        Modal,
+        Popover,
+        Slideover,
+        Tabs,
+        Toggle,
+        MultiSelect,
+      } from 'tailwindcss-stimulus-components'
+      ;(() => {
+        const application = Application.start()
+        application.register('alert', Alert)
+        application.register('color-preview', ColorPreview)
+        application.register('dropdown', Dropdown)
+        application.register('modal', Modal)
+        application.register('popover', Popover)
+        application.register('slideover', Slideover)
+        application.register('tabs', Tabs)
+        application.register('toggle', Toggle)
+        application.register('multi-select', MultiSelect)
       })()
     </script>
 
     <style>
-    /* Prevent scrolling while dialog is open */
-    body:has(dialog[open]) {
-      overflow: hidden;
-    }
-
-    dialog {
-      box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
-    }
-
-    @keyframes fade-in {
-      0% {
-        opacity: 0;
+      /* Prevent scrolling while dialog is open */
+      body:has(dialog[open]) {
+        overflow: hidden;
       }
-      100% {
-        opacity: 1;
+
+      dialog {
+        box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
       }
-    }
 
-    @keyframes fade-out {
-      0% {
-        opacity: 1;
+      @keyframes fade-in {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
       }
-      100% {
-        opacity: 0;
+
+      @keyframes fade-out {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
       }
-    }
     </style>
-</head>
+  </head>
   <body>
     <div class="container mx-auto p-8">
       <h1 class="text-3xl font-semibold mb-2">Tailwind Stimulus Components Examples</h1>
-      <img src="https://img.shields.io/npm/v/tailwindcss-stimulus-components.svg" class="inline-block mr-2" />
-      <a href="https://github.com/excid3/tailwindcss-stimulus-components" target="_blank" class="text-blue-500">View on Github</a>
-      <p class="my-4">To view examples locally, run <code class="bg-gray-300 text-sm px-2 py-1 rounded">npm install && npm run build && npx serve</code> and then open <code class="bg-gray-300 text-sm px-2 py-1 rounded">localhost:3000</code> in your browser.</p>
+      <img
+        src="https://img.shields.io/npm/v/tailwindcss-stimulus-components.svg"
+        class="inline-block mr-2"
+      />
+      <a
+        href="https://github.com/excid3/tailwindcss-stimulus-components"
+        target="_blank"
+        class="text-blue-500"
+        >View on Github</a
+      >
+      <p class="my-4">
+        To view examples locally, run
+        <code class="bg-gray-300 text-sm px-2 py-1 rounded"
+          >npm install && npm run build && npx serve</code
+        >
+        and then open <code class="bg-gray-300 text-sm px-2 py-1 rounded">localhost:3000</code> in
+        your browser.
+      </p>
 
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Alerts</h2>
 
         <!-- Alert -->
-        <div data-controller="alert"
-             data-transition-enter="ease-in-out duration-500"
-             data-transition-enter-from="translate-x-full opacity-0"
-             data-transition-enter-to="translate-x-0 opacity-100"
-             data-transition-leave="ease-in-out duration-500"
-             data-transition-leave-from="translate-x-0 opacity-100"
-             data-transition-leave-to="translate-x-full opacity-0"
-             class="hidden max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-gray-800 text-white pointer-events-auto"
-             >
-             <div class="p-2">
-               <div class="flex items-start">
-                 <div class="ml-3 w-0 flex-1 pt-0.5">
-                   <p class="text-sm leading-5 font-medium">
-                   We have alerts too!
-                   </p>
-                 </div>
-                 <div class="ml-4 flex-shrink-0 flex">
-                   <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
-                     <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                       <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
-                     </svg>
-                   </button>
-                 </div>
-               </div>
-             </div>
+        <div
+          data-controller="alert"
+          data-transition-enter="ease-in-out duration-500"
+          data-transition-enter-from="translate-x-full opacity-0"
+          data-transition-enter-to="translate-x-0 opacity-100"
+          data-transition-leave="ease-in-out duration-500"
+          data-transition-leave-from="translate-x-0 opacity-100"
+          data-transition-leave-to="translate-x-full opacity-0"
+          class="hidden max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-gray-800 text-white pointer-events-auto"
+        >
+          <div class="p-2">
+            <div class="flex items-start">
+              <div class="ml-3 w-0 flex-1 pt-0.5">
+                <p class="text-sm leading-5 font-medium">We have alerts too!</p>
+              </div>
+              <div class="ml-4 flex-shrink-0 flex">
+                <button
+                  data-action="alert#close"
+                  class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150"
+                >
+                  <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fill-rule="evenodd"
+                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Dropdowns</h2>
-        <p class="mb-4 text-gray-700">When open, you can navigate menu items with Up and Down keys.</p>
+        <p class="mb-4 text-gray-700">
+          When open, you can navigate menu items with Up and Down keys.
+        </p>
 
         <div
-            data-controller="dropdown"
-            data-action="click@window->dropdown#hide touchstart@window->dropdown#hide keydown.up->dropdown#previousItem keydown.down->dropdown#nextItem keydown.esc->dropdown#hide"
-            class="inline-block relative">
-            <button data-action="dropdown#toggle:stop" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">
-              Dropdown
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="inline-block fill-current h-4 w-4"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
-            </button>
-            <div data-dropdown-target="menu" class="hidden absolute top-4 right-0 z-10 mt-5 flex w-screen max-w-max">
-              <div class="text-sm bg-white shadow-lg rounded border overflow-hidden w-32">
-                <a data-dropdown-target="menuItem" href="#" class='no-underline block pl-4 py-2 text-gray-900 bg-white hover:bg-gray-100 whitespace-nowrap focus:bg-gray-100'>Account</a>
-                <a data-dropdown-target="menuItem" href="#" class='no-underline block pl-4 py-2 text-gray-900 bg-white hover:bg-gray-100 whitespace-nowrap focus:bg-gray-100'>Billing</a>
-                <hr class="border-t" />
-                <a data-dropdown-target="menuItem" href="#" class='no-underline block pl-4 py-2 text-gray-900 bg-white hover:bg-gray-100 whitespace-nowrap focus:bg-gray-100'>Sign Out</a>
-              </div>
+          data-controller="dropdown"
+          data-action="click@window->dropdown#hide touchstart@window->dropdown#hide keydown.up->dropdown#previousItem keydown.down->dropdown#nextItem keydown.esc->dropdown#hide"
+          class="inline-block relative"
+        >
+          <button
+            data-action="dropdown#toggle:stop"
+            class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded"
+          >
+            Dropdown
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              class="inline-block fill-current h-4 w-4"
+            >
+              <path
+                d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+              ></path>
+            </svg>
+          </button>
+          <div
+            data-dropdown-target="menu"
+            class="hidden absolute top-4 right-0 z-10 mt-5 flex w-screen max-w-max"
+          >
+            <div class="text-sm bg-white shadow-lg rounded border overflow-hidden w-32">
+              <a
+                data-dropdown-target="menuItem"
+                href="#"
+                class="no-underline block pl-4 py-2 text-gray-900 bg-white hover:bg-gray-100 whitespace-nowrap focus:bg-gray-100"
+                >Account</a
+              >
+              <a
+                data-dropdown-target="menuItem"
+                href="#"
+                class="no-underline block pl-4 py-2 text-gray-900 bg-white hover:bg-gray-100 whitespace-nowrap focus:bg-gray-100"
+                >Billing</a
+              >
+              <hr class="border-t" />
+              <a
+                data-dropdown-target="menuItem"
+                href="#"
+                class="no-underline block pl-4 py-2 text-gray-900 bg-white hover:bg-gray-100 whitespace-nowrap focus:bg-gray-100"
+                >Sign Out</a
+              >
             </div>
+          </div>
         </div>
       </div>
 
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Modals</h2>
-        <p>Modals use the <code>&lt;dialog&gt;</code> html element and can be closed with <kbd>Esc</kbd> or a button. See the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility_concerns" target="_blank" class="underline text-blue-500">dialog element MDN docs</a>.</p>
+        <p>
+          Modals use the <code>&lt;dialog&gt;</code> html element and can be closed with
+          <kbd>Esc</kbd> or a button. See the
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility_concerns"
+            target="_blank"
+            class="underline text-blue-500"
+            >dialog element MDN docs</a
+          >.
+        </p>
 
         <style>
           dialog.modal[open] {
@@ -141,19 +213,43 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Modals</h2>
           }
         </style>
         <div data-controller="modal">
-          <dialog data-modal-target="dialog" data-action="click->modal#backdropClose" class="modal rounded-lg">
+          <dialog
+            data-modal-target="dialog"
+            data-action="click->modal#backdropClose"
+            class="modal rounded-lg"
+          >
             <div class="p-8">
               <p>This modal dialog has a groovy backdrop!</p>
-              <button autofocus data-action="modal#close" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
+              <button
+                autofocus
+                data-action="modal#close"
+                class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded"
+              >
+                Close
+              </button>
             </div>
           </dialog>
-          <button data-action="modal#open" class="bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2.5 rounded">Open modal</button>
+          <button
+            data-action="modal#open"
+            class="bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2.5 rounded"
+          >
+            Open modal
+          </button>
         </div>
       </div>
 
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Slideovers</h2>
-        <p>Slideovers use the <code>&lt;dialog&gt;</code> html element and can be closed with <kbd>Esc</kbd> or a button. See the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility_concerns" target="_blank" class="underline text-blue-500">dialog element MDN docs</a>.</p>
+        <p>
+          Slideovers use the <code>&lt;dialog&gt;</code> html element and can be closed with
+          <kbd>Esc</kbd> or a button. See the
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility_concerns"
+            target="_blank"
+            class="underline text-blue-500"
+            >dialog element MDN docs</a
+          >.
+        </p>
 
         <div data-controller="slideover">
           <style>
@@ -166,58 +262,84 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Slideovers</h2>
               animation: slide-out-to-left 200ms forwards ease-in-out;
             }
 
-            @keyframes slide-in-from-left{
+            @keyframes slide-in-from-left {
               from {
                 transform: translateX(-100%);
               }
             }
 
-            @keyframes slide-out-to-left{
+            @keyframes slide-out-to-left {
               to {
                 transform: translateX(-100%);
               }
             }
           </style>
-          <dialog data-slideover-target="dialog" data-action="click->slideover#backdropClose" class="slideover h-dvh max-h-dvh m-0">
+          <dialog
+            data-slideover-target="dialog"
+            data-action="click->slideover#backdropClose"
+            class="slideover h-dvh max-h-dvh m-0"
+          >
             <div class="h-full w-72 p-8">
               <p>This slideover dialog has a groovy backdrop!</p>
-              <button autofocus data-action="slideover#close" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
+              <button
+                autofocus
+                data-action="slideover#close"
+                class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded"
+              >
+                Close
+              </button>
             </div>
           </dialog>
-          <button data-action="slideover#open" class="bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2.5 rounded">Open slideover</button>
+          <button
+            data-action="slideover#open"
+            class="bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2.5 rounded"
+          >
+            Open slideover
+          </button>
         </div>
       </div>
 
       <!-- Popover example -->
-      <div class='my-12'>
+      <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Popovers</h2>
 
-        <div class="inline-block relative cursor-pointer" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
+        <div
+          class="inline-block relative cursor-pointer"
+          data-controller="popover"
+          data-action="mouseenter->popover#show mouseleave->popover#hide"
+        >
           <span class="underline">Hover me</span>
-          <div class="hidden absolute left-0 bottom-7 w-max bg-white border border-gray-200 shadow rounded p-2"
-               data-popover-target="content"
-               data-transition-enter="transition-opacity ease-in-out duration-300"
-               data-transition-enter-from="opacity-0"
-               data-transition-enter-to="opacity-100"
-               data-transition-leave="transition-opacity ease-in-out duration-300"
-               data-transition-leave-from="opacity-100"
-               data-transition-leave-to="opacity-0"
-            >
+          <div
+            class="hidden absolute left-0 bottom-7 w-max bg-white border border-gray-200 shadow rounded p-2"
+            data-popover-target="content"
+            data-transition-enter="transition-opacity ease-in-out duration-300"
+            data-transition-enter-from="opacity-0"
+            data-transition-enter-to="opacity-100"
+            data-transition-leave="transition-opacity ease-in-out duration-300"
+            data-transition-leave-from="opacity-100"
+            data-transition-leave-to="opacity-0"
+          >
             This popover shows on hover
           </div>
         </div>
 
-        <div class="inline-block relative cursor-pointer" data-controller="popover" data-action="click->popover#show" data-popover-dismiss-after-value="3000">
+        <div
+          class="inline-block relative cursor-pointer"
+          data-controller="popover"
+          data-action="click->popover#show"
+          data-popover-dismiss-after-value="3000"
+        >
           <span class="underline">Click me</span>
-          <div class="hidden absolute left-0 bottom-7 w-max bg-white border border-gray-200 shadow rounded p-2"
-               data-popover-target="content"
-               data-transition-enter="transition-opacity ease-in-out duration-300"
-               data-transition-enter-from="opacity-0"
-               data-transition-enter-to="opacity-100"
-               data-transition-leave="transition-opacity ease-in-out duration-300"
-               data-transition-leave-from="opacity-100"
-               data-transition-leave-to="opacity-0"
-            >
+          <div
+            class="hidden absolute left-0 bottom-7 w-max bg-white border border-gray-200 shadow rounded p-2"
+            data-popover-target="content"
+            data-transition-enter="transition-opacity ease-in-out duration-300"
+            data-transition-enter-from="opacity-0"
+            data-transition-enter-to="opacity-100"
+            data-transition-leave="transition-opacity ease-in-out duration-300"
+            data-transition-leave-from="opacity-100"
+            data-transition-leave-to="opacity-0"
+          >
             This popover shows on click and auto-hides after 3 seconds.
           </div>
         </div>
@@ -225,18 +347,53 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Popovers</h2>
 
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Tabs</h2>
-        <p class="mb-4 text-gray-700">These tabs can be navigated with the keyboard using Left, Right, Home, and End.</p>
+        <p class="mb-4 text-gray-700">
+          These tabs can be navigated with the keyboard using Left, Right, Home, and End.
+        </p>
 
-        <div data-controller="tabs" data-tabs-active-tab-class="-mb-px border-l border-t border-r rounded-t">
+        <div
+          data-controller="tabs"
+          data-tabs-active-tab-class="-mb-px border-l border-t border-r rounded-t"
+        >
           <ul class="list-reset flex border-b">
-            <li class="-mb-px mr-1" id="first" data-tabs-target="tab" data-action="click->tabs#change:prevent">
-              <a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#" data-action="keydown.left->tabs#previousTab keydown.right->tabs#nextTab keydown.home->tabs#firstTab:prevent keydown.end->tabs#lastTab:prevent">First</a>
+            <li
+              class="-mb-px mr-1"
+              id="first"
+              data-tabs-target="tab"
+              data-action="click->tabs#change:prevent"
+            >
+              <a
+                class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline"
+                href="#"
+                data-action="keydown.left->tabs#previousTab keydown.right->tabs#nextTab keydown.home->tabs#firstTab:prevent keydown.end->tabs#lastTab:prevent"
+                >First</a
+              >
             </li>
-            <li class="mr-1" id="second" data-tabs-target="tab" data-action="click->tabs#change:prevent">
-              <a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#" data-action="keydown.left->tabs#previousTab keydown.right->tabs#nextTab keydown.home->tabs#firstTab:prevent keydown.end->tabs#lastTab:prevent">Second</a>
+            <li
+              class="mr-1"
+              id="second"
+              data-tabs-target="tab"
+              data-action="click->tabs#change:prevent"
+            >
+              <a
+                class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline"
+                href="#"
+                data-action="keydown.left->tabs#previousTab keydown.right->tabs#nextTab keydown.home->tabs#firstTab:prevent keydown.end->tabs#lastTab:prevent"
+                >Second</a
+              >
             </li>
-            <li class="mr-1" id="third" data-tabs-target="tab" data-action="click->tabs#change:prevent">
-              <a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#" data-action="keydown.left->tabs#previousTab keydown.right->tabs#nextTab keydown.home->tabs#firstTab:prevent keydown.end->tabs#lastTab:prevent">Third</a>
+            <li
+              class="mr-1"
+              id="third"
+              data-tabs-target="tab"
+              data-action="click->tabs#change:prevent"
+            >
+              <a
+                class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline"
+                href="#"
+                data-action="keydown.left->tabs#previousTab keydown.right->tabs#nextTab keydown.home->tabs#firstTab:prevent keydown.end->tabs#lastTab:prevent"
+                >Third</a
+              >
             </li>
           </ul>
 
@@ -251,8 +408,20 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Tabs</h2>
           </div>
 
           <div class="mt-4">
-            <a data-action="click->tabs#change:prevent" data-index="1" class="text-blue-500 underline" href="#">Change tab by data-index</a>
-            <a data-action="click->tabs#change:prevent" data-id="third" class="text-blue-500 underline" href="#">Change tab by data-id</a>
+            <a
+              data-action="click->tabs#change:prevent"
+              data-index="1"
+              class="text-blue-500 underline"
+              href="#"
+              >Change tab by data-index</a
+            >
+            <a
+              data-action="click->tabs#change:prevent"
+              data-id="third"
+              class="text-blue-500 underline"
+              href="#"
+              >Change tab by data-id</a
+            >
 
             <span>or change by select</span>
             <select data-action="tabs#change" data-tabs-target="select">
@@ -269,23 +438,55 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Tabs</h2>
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Radios as Tabs</h2>
 
-        <div data-controller="tabs" data-tabs-active-tab-class="-mb-px border-l border-t border-r rounded-t">
+        <div
+          data-controller="tabs"
+          data-tabs-active-tab-class="-mb-px border-l border-t border-r rounded-t"
+        >
           <ul class="list-reset flex border-b">
-            <li class="-mb-px mr-1" id="radio_default" data-tabs-target="tab" data-action="click->tabs#change">
-              <label class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline cursor-pointer">
-                <input type="radio" value="1" checked="checked" name="radio[option]" id="radio_option_1">
+            <li
+              class="-mb-px mr-1"
+              id="radio_default"
+              data-tabs-target="tab"
+              data-action="click->tabs#change"
+            >
+              <label
+                class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline cursor-pointer"
+              >
+                <input
+                  type="radio"
+                  value="1"
+                  checked="checked"
+                  name="radio[option]"
+                  id="radio_option_1"
+                />
                 Active
               </label>
             </li>
-            <li class="mr-1" id="second_radio" data-tabs-target="tab" data-action="click->tabs#change">
-              <label class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline cursor-pointer">
-                <input type="radio" value="2" name="radio[option]" id="radio_option_2">
+            <li
+              class="mr-1"
+              id="second_radio"
+              data-tabs-target="tab"
+              data-action="click->tabs#change"
+            >
+              <label
+                class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline cursor-pointer"
+              >
+                <input type="radio" value="2" name="radio[option]" id="radio_option_2" />
                 Second
               </label>
             </li>
             <li class="mr-1" id="third_radio" data-tabs-target="tab">
-              <label class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline cursor-pointer">
-                <input type="radio" value="3" name="radio[option]" id="radio_option_3" data-action="click->tabs#change" data-id="third_radio">
+              <label
+                class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline cursor-pointer"
+              >
+                <input
+                  type="radio"
+                  value="3"
+                  name="radio[option]"
+                  id="radio_option_3"
+                  data-action="click->tabs#change"
+                  data-id="third_radio"
+                />
                 Third
               </label>
             </li>
@@ -308,84 +509,155 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Radios as Tabs</h2>
       <!-- Toggle -->
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold">Toggle</h2>
-        <div data-controller='toggle' class="m-2 p-6 border flex items-center gap-4">
-          <button data-action='click->toggle#toggle:prevent touch->toggle#toggle:prevent' class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded">
+        <div data-controller="toggle" class="m-2 p-6 border flex items-center gap-4">
+          <button
+            data-action="click->toggle#toggle:prevent touch->toggle#toggle:prevent"
+            class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded"
+          >
             Toggle button
           </button>
-          <div class="hidden bg-yellow-500/20"
-               data-toggle-target='toggleable'
-               data-transition-enter="transition-all ease-linear duration-300"
-               data-transition-enter-from="opacity-0 h-0"
-               data-transition-enter-to="opacity-100"
-               data-transition-leave="transition-all ease-linear duration-300"
-               data-transition-leave-from="opacity-100"
-               data-transition-leave-to="opacity-0"
-               >
+          <div
+            class="hidden bg-yellow-500/20"
+            data-toggle-target="toggleable"
+            data-transition-enter="transition-all ease-linear duration-300"
+            data-transition-enter-from="opacity-0 h-0"
+            data-transition-enter-to="opacity-100"
+            data-transition-leave="transition-all ease-linear duration-300"
+            data-transition-leave-from="opacity-100"
+            data-transition-leave-to="opacity-0"
+          >
             <p>This is hidden text...</p>
           </div>
         </div>
-        <div data-controller='toggle' class="m-2 p-6 border flex items-center gap-4">
+        <div data-controller="toggle" class="m-2 p-6 border flex items-center gap-4">
           <label class="flex gap-2 items-center">
-            <input type="checkbox" data-action="toggle#toggleInput">
+            <input type="checkbox" data-action="toggle#toggleInput" />
             Trigger by checkbox or radio inputs
           </label>
-          <div class="hidden bg-yellow-500/20"
-                data-toggle-target='toggleable'
-                data-transition-enter="transition-all ease-linear duration-300"
-                data-transition-enter-from="opacity-0 h-0"
-                data-transition-enter-to="opacity-100"
-                data-transition-leave="transition-all ease-linear duration-300"
-                data-transition-leave-from="opacity-100"
-                data-transition-leave-to="opacity-0"
-                >
+          <div
+            class="hidden bg-yellow-500/20"
+            data-toggle-target="toggleable"
+            data-transition-enter="transition-all ease-linear duration-300"
+            data-transition-enter-from="opacity-0 h-0"
+            data-transition-enter-to="opacity-100"
+            data-transition-leave="transition-all ease-linear duration-300"
+            data-transition-leave-from="opacity-100"
+            data-transition-leave-to="opacity-0"
+          >
             <p>This is hidden text...</p>
           </div>
         </div>
 
-        <div data-controller='toggle' class="m-2 p-6 border flex items-center gap-4">
-          <button data-action='click->toggle#toggle:prevent touch->toggle#toggle:prevent' class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded">
+        <div data-controller="toggle" class="m-2 p-6 border flex items-center gap-4">
+          <button
+            data-action="click->toggle#toggle:prevent touch->toggle#toggle:prevent"
+            class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded"
+          >
             Toggle button with custom classes
           </button>
-          <div class="opacity-50 bg-yellow-500/20"
-                data-toggle-target='toggleable'
-                data-toggle-class="opacity-50"
-                >
+          <div
+            class="opacity-50 bg-yellow-500/20"
+            data-toggle-target="toggleable"
+            data-toggle-class="opacity-50"
+          >
             <p>This is toggleable text...</p>
           </div>
         </div>
       </div>
 
-
       <!-- Color Picker and Preview -->
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Color Picker and Preview</h2>
         <div class="col-span-6 sm:col-span-3">
-          <label for="hex_color_bg" class="block text-sm font-medium text-gray-700 ">
-            Color
-          </label>
+          <label for="hex_color_bg" class="block text-sm font-medium text-gray-700"> Color </label>
           <div class="mt-3 flex items-center" data-controller="color-preview">
-            <p data-color-preview-target="preview"
-               class="h-10 w-10 mr-2 rounded-full text-2xl text-white text-center"
-               style="background-color: #ba1e03; color: #fff; padding-top: 1px;">
+            <p
+              data-color-preview-target="preview"
+              class="h-10 w-10 mr-2 rounded-full text-2xl text-white text-center"
+              style="background-color: #ba1e03; color: #fff; padding-top: 1px"
+            >
               A
             </p>
             <span class="ml-2">
               <div class="flex rounded-md shadow-sm">
-                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
+                <span
+                  class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500"
+                >
                   #
                 </span>
-                <input data-action="input->color-preview#update"
-                       data-color-preview-target="color"
-                       id="hex_color_bg"
-                       name="hex_color_bg"
-                       type="color"
-                       value="#ba1e03"
-                       class="focus:ring-indigo-500 focus:border-indigo-500 block shadow-sm sm:text-sm border-gray-300 flex-1 rounded-r-md mt-0 w-24 h-8 px-1 py-1 border" />
+                <input
+                  data-action="input->color-preview#update"
+                  data-color-preview-target="color"
+                  id="hex_color_bg"
+                  name="hex_color_bg"
+                  type="color"
+                  value="#ba1e03"
+                  class="focus:ring-indigo-500 focus:border-indigo-500 block shadow-sm sm:text-sm border-gray-300 flex-1 rounded-r-md mt-0 w-24 h-8 px-1 py-1 border"
+                />
               </div>
             </span>
           </div>
         </div>
       </div>
+
+      <!-- Multiselect dropdown and Preview -->
+      <div class="my-12 pb-12">
+        <h2 class="text-2xl text-gray-800 font-semibold mb-4">Multiselect Dropdown and Preview</h2>
+        <div class="col-span-6 sm:col-span-3">
+          <label for="multiselect" class="block text-sm font-medium text-gray-700">
+            Selected option(s) returned as comma separated string as shown in item selector.
+          </label>
+          <div data-controller="multi-select" class="relative w-1/5">
+            <div
+              data-action="click->multi-select#toggle"
+              class="border rounded-md p-3 bg-white shadow-md cursor-pointer w-auto"
+            >
+              <input
+                readonly
+                name="selected_tag_names"
+                data-multi-select-target="selectedItems"
+                class="text-gray-600 w-full"
+                placeholder="Select options"
+                cursor="pointer"
+              />
+            </div>
+            <div
+              data-multi-select-target="options"
+              class="absolute left-0 right-0 mt-1 hidden bg-white border rounded-md shadow-lg z-10 w-32"
+            >
+              <div class="p-2">
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    value="Option 1"
+                    data-action="change->multi-select#updateSelection"
+                    class="mr-2"
+                  />
+                  Option 1
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    value="Option 2"
+                    data-action="change->multi-select#updateSelection"
+                    class="mr-2"
+                  />
+                  Option 2
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    value="Option 3"
+                    data-action="change->multi-select#updateSelection"
+                    class="mr-2"
+                  />
+                  Option 3
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index e59d747..a55075e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
 {
   "name": "tailwindcss-stimulus-components",
-  "version": "6.0.2",
+  "version": "6.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tailwindcss-stimulus-components",
-      "version": "6.0.2",
+      "version": "6.1.2",
       "license": "MIT",
       "devDependencies": {
         "@open-wc/testing": "^4.0.0",
         "@web/test-runner": "^0.18.0",
         "@web/test-runner-commands": "^0.9.0",
-        "esbuild": "^0.23.0"
+        "esbuild": "^0.24.0"
       },
       "peerDependencies": {
         "@hotwired/stimulus": ">= 3.0.0"
@@ -77,9 +77,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
-      "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
       "cpu": [
         "ppc64"
       ],
@@ -94,9 +94,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz",
-      "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
       "cpu": [
         "arm"
       ],
@@ -111,9 +111,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz",
-      "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
       "cpu": [
         "arm64"
       ],
@@ -128,9 +128,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz",
-      "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
       "cpu": [
         "x64"
       ],
@@ -145,9 +145,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz",
-      "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
       "cpu": [
         "arm64"
       ],
@@ -162,9 +162,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz",
-      "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
       "cpu": [
         "x64"
       ],
@@ -179,9 +179,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
       "cpu": [
         "arm64"
       ],
@@ -196,9 +196,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz",
-      "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
       "cpu": [
         "x64"
       ],
@@ -213,9 +213,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz",
-      "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
       "cpu": [
         "arm"
       ],
@@ -230,9 +230,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz",
-      "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
       "cpu": [
         "arm64"
       ],
@@ -247,9 +247,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz",
-      "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
       "cpu": [
         "ia32"
       ],
@@ -264,9 +264,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz",
-      "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
       "cpu": [
         "loong64"
       ],
@@ -281,9 +281,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz",
-      "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
       "cpu": [
         "mips64el"
       ],
@@ -298,9 +298,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz",
-      "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
       "cpu": [
         "ppc64"
       ],
@@ -315,9 +315,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz",
-      "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
       "cpu": [
         "riscv64"
       ],
@@ -332,9 +332,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz",
-      "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
       "cpu": [
         "s390x"
       ],
@@ -349,9 +349,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz",
-      "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
       "cpu": [
         "x64"
       ],
@@ -366,9 +366,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
-      "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
       "cpu": [
         "x64"
       ],
@@ -383,9 +383,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
       "cpu": [
         "arm64"
       ],
@@ -400,9 +400,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz",
-      "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
       "cpu": [
         "x64"
       ],
@@ -417,9 +417,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
-      "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
       "cpu": [
         "x64"
       ],
@@ -434,9 +434,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz",
-      "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
       "cpu": [
         "arm64"
       ],
@@ -451,9 +451,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz",
-      "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
       "cpu": [
         "ia32"
       ],
@@ -468,9 +468,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz",
-      "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+      "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
       "cpu": [
         "x64"
       ],
@@ -2440,9 +2440,9 @@
       "dev": true
     },
     "node_modules/esbuild": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz",
-      "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+      "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -2453,30 +2453,30 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.23.1",
-        "@esbuild/android-arm": "0.23.1",
-        "@esbuild/android-arm64": "0.23.1",
-        "@esbuild/android-x64": "0.23.1",
-        "@esbuild/darwin-arm64": "0.23.1",
-        "@esbuild/darwin-x64": "0.23.1",
-        "@esbuild/freebsd-arm64": "0.23.1",
-        "@esbuild/freebsd-x64": "0.23.1",
-        "@esbuild/linux-arm": "0.23.1",
-        "@esbuild/linux-arm64": "0.23.1",
-        "@esbuild/linux-ia32": "0.23.1",
-        "@esbuild/linux-loong64": "0.23.1",
-        "@esbuild/linux-mips64el": "0.23.1",
-        "@esbuild/linux-ppc64": "0.23.1",
-        "@esbuild/linux-riscv64": "0.23.1",
-        "@esbuild/linux-s390x": "0.23.1",
-        "@esbuild/linux-x64": "0.23.1",
-        "@esbuild/netbsd-x64": "0.23.1",
-        "@esbuild/openbsd-arm64": "0.23.1",
-        "@esbuild/openbsd-x64": "0.23.1",
-        "@esbuild/sunos-x64": "0.23.1",
-        "@esbuild/win32-arm64": "0.23.1",
-        "@esbuild/win32-ia32": "0.23.1",
-        "@esbuild/win32-x64": "0.23.1"
+        "@esbuild/aix-ppc64": "0.24.0",
+        "@esbuild/android-arm": "0.24.0",
+        "@esbuild/android-arm64": "0.24.0",
+        "@esbuild/android-x64": "0.24.0",
+        "@esbuild/darwin-arm64": "0.24.0",
+        "@esbuild/darwin-x64": "0.24.0",
+        "@esbuild/freebsd-arm64": "0.24.0",
+        "@esbuild/freebsd-x64": "0.24.0",
+        "@esbuild/linux-arm": "0.24.0",
+        "@esbuild/linux-arm64": "0.24.0",
+        "@esbuild/linux-ia32": "0.24.0",
+        "@esbuild/linux-loong64": "0.24.0",
+        "@esbuild/linux-mips64el": "0.24.0",
+        "@esbuild/linux-ppc64": "0.24.0",
+        "@esbuild/linux-riscv64": "0.24.0",
+        "@esbuild/linux-s390x": "0.24.0",
+        "@esbuild/linux-x64": "0.24.0",
+        "@esbuild/netbsd-x64": "0.24.0",
+        "@esbuild/openbsd-arm64": "0.24.0",
+        "@esbuild/openbsd-x64": "0.24.0",
+        "@esbuild/sunos-x64": "0.24.0",
+        "@esbuild/win32-arm64": "0.24.0",
+        "@esbuild/win32-ia32": "0.24.0",
+        "@esbuild/win32-x64": "0.24.0"
       }
     },
     "node_modules/escalade": {
diff --git a/src/index.js b/src/index.js
index 7ff70f1..d4b3d43 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,8 +3,9 @@ export { default as Autosave } from './autosave.js'
 export { default as ColorPreview } from './color_preview.js'
 export { default as Dropdown } from './dropdown.js'
 export { default as Modal } from './modal.js'
+export { default as MultiSelect } from './multi_select.js'
 export { default as Popover } from './popover.js'
 export { default as Slideover } from './slideover.js'
 export { default as Tabs } from './tabs.js'
 export { default as Toggle } from './toggle.js'
-export { transition } from "./transition.js"
+export { transition } from './transition.js'
diff --git a/src/multi_select.js b/src/multi_select.js
new file mode 100644
index 0000000..22d2b5b
--- /dev/null
+++ b/src/multi_select.js
@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['options', 'selectedItems']
+
+  connect() {
+    document.addEventListener('click', this.handleOutsideClick.bind(this))
+    this.updateSelection()
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.handleOutsideClick.bind(this))
+  }
+
+  toggle() {
+    this.optionsTarget.classList.toggle('hidden')
+  }
+
+  updateSelection() {
+    const checkboxes = this.optionsTarget.querySelectorAll("input[type='checkbox']")
+    const selected = Array.from(checkboxes)
+      .filter(checkbox => checkbox.checked)
+      .map(checkbox => checkbox.value)
+
+    this.selectedItemsTarget.value = selected.length ? selected.join(', ') : 'Select options'
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.optionsTarget.classList.add('hidden')
+    }
+  }
+}
diff --git a/test/fixtures/multi_select.html b/test/fixtures/multi_select.html
new file mode 100644
index 0000000..4096d86
--- /dev/null
+++ b/test/fixtures/multi_select.html
@@ -0,0 +1,48 @@
+<div data-controller="multi-select" class="relative">
+  <div
+    data-action="click->multi-select#toggle"
+    class="border rounded-md p-3 bg-white shadow-md cursor-pointer"
+  >
+    <input
+      readonly
+      name="selected_tag_names"
+      data-multi-select-target="selectedItems"
+      class="text-gray-600"
+      placeholder="Select options"
+    />
+  </div>
+  <div
+    data-multi-select-target="options"
+    class="absolute left-0 right-0 mt-1 hidden bg-white border rounded-md shadow-lg z-10"
+  >
+    <div class="p-2">
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          value="Option 1"
+          data-action="change->multi-select#updateSelection"
+          class="mr-2"
+        />
+        Option 1
+      </label>
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          value="Option 2"
+          data-action="change->multi-select#updateSelection"
+          class="mr-2"
+        />
+        Option 2
+      </label>
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          value="Option 3"
+          data-action="change->multi-select#updateSelection"
+          class="mr-2"
+        />
+        Option 3
+      </label>
+    </div>
+  </div>
+</div>
diff --git a/test/multi_select_test.js b/test/multi_select_test.js
new file mode 100644
index 0000000..b149bbc
--- /dev/null
+++ b/test/multi_select_test.js
@@ -0,0 +1,71 @@
+import { Application } from '@hotwired/stimulus'
+import { expect, fixture, html } from '@open-wc/testing'
+import MultiSelect from '../src/multi_select'
+import { fetchFixture } from './test_helpers'
+
+describe('MultiSelectController', () => {
+  beforeEach(async () => {
+    const application = Application.start()
+    application.register('multi-select', MultiSelect)
+
+    const html = await fetchFixture('multi_select.html')
+    await fixture(html)
+  })
+
+  it('should toggle options visibility when clicked', async () => {
+    const toggleButton = document.querySelector('[data-action="click->multi-select#toggle"]')
+    const options = document.querySelector('[data-multi-select-target="options"]')
+
+    // on initialization: options should be hidden
+    expect(options.classList.contains('hidden')).to.be.true
+
+    // clicking the multi-select button shows options (hidden removed)
+    toggleButton.click()
+    await document.updateComplete
+    expect(options.classList.contains('hidden')).to.be.false
+
+    // click the same button again to hide options (hidden re-added)
+    toggleButton.click()
+    await document.updateComplete
+    expect(options.classList.contains('hidden')).to.be.true
+  })
+
+  it('should update selected items text when checkboxes are checked', async () => {
+    const checkbox1 = document.querySelector('input[value="Option 1"]')
+    const selectedTagNames = document.querySelector('[name="selected_tag_names"]')
+
+    // check the first checkbox, confirm its checked
+    checkbox1.click()
+    await document.updateComplete // Wait for updates to apply
+    expect(selectedTagNames.value).to.equal('Option 1')
+
+    // check the second checkbox, confirm again
+    const checkbox2 = document.querySelector('input[value="Option 2"]')
+    checkbox2.click()
+    await document.updateComplete
+    expect(selectedTagNames.value).to.equal('Option 1, Option 2')
+
+    // uncheck the first checkbox, confirm first option not present
+    checkbox1.click()
+    await document.updateComplete
+    expect(selectedTagNames.value).to.equal('Option 2')
+  })
+
+  it('should reset text when no checkboxes are checked', async () => {
+    const selectedTagNames = document.querySelector('[name="selected_tag_names"]')
+    const checkboxes = document.querySelectorAll('input[type="checkbox"]')
+
+    // check starting value
+    expect(selectedTagNames.value).to.equal('Select options')
+
+    // check all boxes and confirm all checked labels are showing
+    checkboxes.forEach(checkbox => checkbox.click())
+    await document.updateComplete
+    expect(selectedTagNames.value).to.equal('Option 1, Option 2, Option 3')
+
+    // uncheck all boxes - confirm starting phrase visible
+    checkboxes.forEach(checkbox => checkbox.click())
+    await document.updateComplete
+    expect(selectedTagNames.value).to.equal('Select options')
+  })
+})
