Combobox

The combo box is a simple, ready-to-use component that you can expand with additional logic depending on your needs. Simply add it to your Astro page or component, customize the items, and integrate your own code to achieve the desired functionality.

src/pages/index.astro

---
// Import
import Combobox from "../components/Combobox.astro";
---
(...)
  <Combobox />
(...)

---

Combobox

Enhance your forms by adding advanced functionality with a sleek and elegant combobox, improving user experience and interactivity.

Preview

ComboboxSecond ItemThird Item

Code

src/components/Combobox.astro

 ---
 //2 Instruction in this component

 // Here you can add the items for your combobox ↓. ❶
 const items = ["Combobox", "Second Item", "Third Item"];
 ---

 <div id="combo" class="m-10 relative w-64 text-gray-400">

   <select
     class="appearance-none w-full bg-gray-950 hover:bg-gray-900 border border-white/10 py-2 pl-4 pr-10 rounded-lg shadow-md focus:border-white/30"
   >
     {items.map((item) => <option>{item}</option>)}
   </select>

   <div
     class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
   >
     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
         d="M19 9l-7 7-7-7"></path>
     </svg>
   </div>
 </div>

 <!-- Script -->

 <script>
   document.addEventListener("DOMContentLoaded", () => {
     const combo = document.getElementById("combo");
     combo?.addEventListener("change", (e) => {
       console.log("You selected the:", e.target.value);
       //-----
       //Here you can handle the change event and write your logic. ❷
       //-----
     });
   });
 </script>