Custom Combo Box Components
Combo Box
<![CDATA[
<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
<![CDATA[
<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>
]]>