Combo Box

Combo box padrão

Preview

HTML

<div class="combobox">
   <label class="combobox__label" for="combobox-input">Gender</label>
   <div class="combobox__input">
      <input id="combobox-input" placeholder="Select" type="text" autocomplete="off">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.99982 8.78145L11.2998 5.48145L12.2425 6.42411L7.99982 10.6668L3.75716 6.42411L4.69982 5.48145L7.99982 8.78145Z" fill="black"/>
      </svg>
   </div>
   
   <!-- Select -->
   <div class="combobox__select">
      <ul class="combobox__list">
         <li class="combobox__option no-match">
            No matches found
         </li>
         <li class="combobox__option">
            Male
         </li>
         <li class="combobox__option">
            Female
         </li>
         <li class="combobox__option">
            Prefer Not Say
         </li>
      </ul>
   </div>

   <!-- Toggle -->
   <div class="combobox__toggle-container">
      <div class="combobox__toggle">
         <input type="checkbox" id="check">
         <label class="combobox__toggle--trail" for="check">
            <span class="combobox__toggle--handler"></span>
         </label>
      </div>
      <span class="combobox__toggle--text checked">Enabled</span>
      <span class="combobox__toggle--text">Disabled</span>
   </div>
</div>

CSS

.combobox{
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 236px; /* remover */
  height: max-content;
}

.combobox__label{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  margin-bottom: 4px;
}

.combobox__input {
  display: flex;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.combobox__input input{
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 36px 8px 12px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  outline: none;
}

.combobox__input input::placeholder {
  color: #757575;
}

.combobox__input:hover input {
  border-color: #A7A7A7;
}

.combobox__input input:focus {
  border: 1.5px solid #01141E;
}

.combobox__input input:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

.combobox__input svg {
  position: absolute;
  right: 12px;
  top: 14px;
  z-index: 2;
  transition: all .5s;
}

.combobox__input svg.showed {
  transform: rotate(180deg);
}

.combobox__input input:disabled{
  background-color: #F5F5F5;
  cursor: not-allowed;
  color: #8E8E8E;
}

.combobox__input input:disabled::placeholder {
  color: #8E8E8E;
}

.combobox__input:hover input:disabled{
  border: 1px solid #E6E6E6;
}

.combobox__input input:disabled + svg{
  cursor: not-allowed;
  pointer-events: none;
}

.combobox__input input:disabled + svg path{
  fill: #8E8E8E;
}

.combobox__input input:disabled:not(:placeholder-shown):not(:focus) {
  border: 1px solid #E6E6E6;
}

/* Combobox Select */
.combobox__select{
  width: 100%;
  height: auto;
  margin-top: 4px;
  padding: 4px;
  position: absolute;
  top: calc(100% - 32px);
  z-index: 1;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0px 4px 16px 0px #00000014;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
}

.combobox__select.showed{
  max-height: 500px;
  visibility: visible;
}

.combobox__list{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 36px;
}

.combobox__option{
  padding: 8px 12px;
  height: 36px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  cursor: pointer;
}

.combobox__option:hover{
  background-color: #F5F5F5;
  color: #2C2C2C;
}

.combobox__option.no-match{
  display: none;
  pointer-events: none;
}

/* Toggle */

.combobox__toggle-container{
  display: flex;
  gap: 12px;
  margin-top: 12px;
  position: relative;
}

.combobox__toggle {
  display: flex;
  position: relative;
  width: 32px;
  height: 20px;
}

.combobox__toggle input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  inset: 0;
}

.combobox__toggle input[type=checkbox]:checked+.combobox__toggle--trail {
  background-color: #68CE8F;
}

.combobox__toggle:hover input[type=checkbox]:checked+.combobox__toggle--trail {
  background-color: #28B95E;
}

.combobox__toggle input[type=checkbox]:checked+.combobox__toggle--trail .combobox__toggle--handler {
  margin-left: 45%;
  background-color: #fff;
}

.combobox__toggle .combobox__toggle--trail {
  width: inherit;
  height: inherit;
  padding: 2px;
  background-color: #E6E6E6;
  border-radius: 999px;
  transition: all 0.3s linear;
  cursor: pointer;
}

.combobox__toggle .combobox__toggle--trail:hover {
  background-color: #A7A7A7;
}

.combobox__toggle--trail .combobox__toggle--handler {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  position: relative;
  background-color: #fff;
  border-radius: 100%;
  transition: all 0.3s linear;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.combobox__toggle--text{
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #434343;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 44px;
  transition: all .2s;
}

.combobox__toggle--text.checked{
  opacity: 1;
  visibility: visible;
}

Javascript

<script>

   /* Desabilitar o input com o toggle */
   const inputToggle = document.getElementById('check');
   const comboboxInput = document.getElementById('combobox-input');

   inputToggle.onchange = function(){
      document.querySelectorAll('.combobox__toggle--text').forEach(text => {
         text.classList.toggle('checked');
      });
      comboboxInput.disabled = inputToggle.checked;
   }


   /* Busca por texto do input */
   const selectItems = document.querySelectorAll(".combobox__option");
   const noMatchItem = document.querySelector(".no-match");

   comboboxInput.addEventListener("input", function () {
      const searchText = comboboxInput.value.toLowerCase();
      let matchFound = false;

      selectItems.forEach(function (item) {
         const itemName = item.textContent.toLowerCase();
         const isMatch = itemName.includes(searchText);

         item.style.display = isMatch ? "block" : "none";
         matchFound ||= isMatch;
      });

      noMatchItem.style.display = matchFound ? "none" : "block";
   });


   /* Exibição do select e seleção de um item */
   const comboBox = document.querySelector('.combobox__input');
   const comboBoxSelect = document.querySelector('.combobox__select');
   const arrowIcon = document.querySelector('.combobox__input svg');
   const comboboxList = document.querySelector('.combobox__list');
   
   const toggleDropdown = () => {
      comboBoxSelect.classList.toggle('showed');
      arrowIcon.classList.toggle('showed');
   };

   comboBox.addEventListener('click', toggleDropdown);
   
   comboboxList.addEventListener('click', (event) => {
      if (event.target.classList.contains('combobox__option')) {
         comboboxInput.value = event.target.textContent.trim();
         toggleDropdown();
      }
   });

   document.addEventListener('click', function(event) {
      if (!event.target.closest('.combobox')) {
         comboBoxSelect.classList.remove('showed');
         arrowIcon.classList.remove('showed');
      }
   });
</script>