Custom Combo Box Components

Combo Box

Combo Box
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile 3
Billing 12
Settings 32
<div style="width: 400px;"> <div class="combobox"> <div class="combobox__container"> <div class="combobox__header"> <span class="combobox__header-text">Combo Box</span> <i data-lucide="chevron-down" class="combobox__chevron"></i> </div> </div> <div class="combobox__dropdown"> <div class="combobox__search"> <span class="combobox__search-icon"> <i data-lucide="search"></i> </span> <input type="text" class="combobox__search-input" placeholder="Type to search..."> </div> <div class="combobox__section"> <div class="combobox__section-title">Suggestions</div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="calendar"></i> </div> <span class="combobox__item-text">Calendar</span> </div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="smile"></i> </div> <span class="combobox__item-text">Search Emoji</span> </div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="calculator"></i> </div> <span class="combobox__item-text">Calculator</span> </div> </div> <div class="combobox__section"> <div class="combobox__section-title">Settings</div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="user"></i> </div> <span class="combobox__item-text">Profile</span> <span class="combobox__item-right">3</span> </div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="credit-card"></i> </div> <span class="combobox__item-text">Billing</span> <span class="combobox__item-right">12</span> </div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="settings"></i> </div> <span class="combobox__item-text">Settings</span> <span class="combobox__item-right">32</span> </div> </div> </div> </div> </div>

Combo Box Top

Combo Box
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile 3
Billing 12
Settings 32
<div style="width: 400px;"> <div class="combobox combobox--top"> <div class="combobox__container"> <div class="combobox__header"> <span class="combobox__header-text">Combo Box</span> <i data-lucide="chevron-down" class="combobox__chevron"></i> </div> </div> <div class="combobox__dropdown"> <div class="combobox__search"> <span class="combobox__search-icon"> <i data-lucide="search"></i> </span> <input type="text" class="combobox__search-input" placeholder="Type to search..."> </div> <div class="combobox__section"> <div class="combobox__section-title">Suggestions</div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="calendar"></i> </div> <span class="combobox__item-text">Calendar</span> </div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="smile"></i> </div> <span class="combobox__item-text">Search Emoji</span> </div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="calculator"></i> </div> <span class="combobox__item-text">Calculator</span> </div> </div> <div class="combobox__section"> <div class="combobox__section-title">Settings</div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="user"></i> </div> <span class="combobox__item-text">Profile</span> <span class="combobox__item-right">3</span> </div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="credit-card"></i> </div> <span class="combobox__item-text">Billing</span> <span class="combobox__item-right">12</span> </div> <div class="combobox__item"> <div class="combobox__item-icon"> <i data-lucide="settings"></i> </div> <span class="combobox__item-text">Settings</span> <span class="combobox__item-right">32</span> </div> </div> </div> </div> </div>