Combobox — uicraft

Default

A searchable input with a dropdown list of options. Try searching and selecting.

html

<div class="uc-relative uc-combobox-wrapper">
  <input onfocus="openCombobox('cb1')" type="text" placeholder="Search..." class="uc-input" />
  <div id="cb1" class="uc-dropdown-menu uc-w-full uc-mt-1">
    <div class="uc-combobox-item" onclick="selectComboboxItem(this)">Next.js</div>
    <div class="uc-combobox-item" onclick="selectComboboxItem(this)">SvelteKit</div>
  </div>
</div>

With Groups

Combobox with options organized into labeled groups. Icons are preserved on selection.

html

<div class="uc-relative uc-combobox-wrapper" data-keep-icons="true">
  <div class="uc-relative">
    <svg class="uc-absolute uc-left-3 uc-top-1/2 uc--translate-y-1/2 uc-w-4 uc-h-4 uc-text-fg-disabled">...</svg>
    <input type="text" placeholder="Search..." onfocus="openCombobox('cb-groups')" class="uc-input uc-pl-9" />
  </div>
  <div id="cb-groups" class="uc-dropdown-menu uc-w-full uc-mt-1">
    <div class="uc-combobox-group">
      <div class="uc-text-xs uc-font-semibold uc-text-fg-disabled uc-px-2 uc-py-1.5">Suggestions</div>
      <div class="uc-combobox-item" onclick="selectComboboxItem(this)">
        <svg class="uc-w-4 uc-h-4">...</svg>
        Calendar
      </div>
      <div class="uc-combobox-item" onclick="selectComboboxItem(this)">
        <svg class="uc-w-4 uc-h-4">...</svg>
        Search
      </div>
    </div>
    <div class="uc-h-[0.5px] uc-bg-border-default uc-my-1"></div>
    <div class="uc-combobox-group">
      <div class="uc-text-xs uc-font-semibold uc-text-fg-disabled uc-px-2 uc-py-1.5">Results</div>
      <div class="uc-combobox-item" onclick="selectComboboxItem(this)">
        <svg class="uc-w-4 uc-h-4">...</svg>
        Calculator
      </div>
    </div>
  </div>
</div>

Multi-Select

Select multiple items with tags displayed in the input area.

html

React Vue

<div class="uc-relative uc-combobox-wrapper" data-multi="true">
  <div class="uc-combobox-tags uc-flex uc-flex-wrap uc-items-center uc-gap-1.5 uc-min-h-[2.5rem] uc-w-full uc-rounded-lg uc-border uc-border-border-strong uc-bg-neutrals-surface uc-px-3 uc-py-1.5">
    <span class="uc-combobox-tag uc-inline-flex uc-items-center uc-gap-1 uc-rounded uc-bg-neutrals-subtle uc-px-2 uc-py-0.5 uc-text-xs uc-font-medium">
      React
      <button type="button" onclick="removeComboboxTag(this)"><svg class="uc-w-3 uc-h-3">...</svg></button>
    </span>
    <input type="text" onfocus="openCombobox('cb-multi')" class="uc-flex-1 uc-min-w-[40px] uc-bg-transparent uc-text-sm" />
  </div>
  <div id="cb-multi" class="uc-dropdown-menu uc-w-full uc-mt-1">
    <div class="uc-combobox-item uc-selected" onclick="toggleMultiComboboxItem(this)">
      <svg class="uc-w-4 uc-h-4">...</svg>
      React
    </div>
    <div class="uc-combobox-item" onclick="toggleMultiComboboxItem(this)">
      <span class="uc-w-4 uc-h-4"></span>
      Angular
    </div>
  </div>
</div>

With Button Trigger

Combobox with a button trigger instead of an input field.

html

<div class="uc-relative uc-combobox-wrapper">
  <button type="button" onclick="toggleCombobox('cb-button')" class="uc-flex uc-h-10 uc-w-full uc-items-center uc-justify-between uc-rounded-lg uc-border uc-border-border-strong uc-bg-neutrals-surface uc-px-3">
    <span class="uc-combobox-button-label uc-text-fg-disabled">Select status...</span>
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
  <div id="cb-button" class="uc-dropdown-menu uc-w-full uc-mt-1">
    <div class="uc-combobox-item" onclick="selectComboboxButton(this, 'cb-button')">
      <span class="uc-w-4 uc-h-4"></span>
      Backlog
    </div>
    <div class="uc-combobox-item" onclick="selectComboboxButton(this, 'cb-button')">
      <span class="uc-w-4 uc-h-4"></span>
      Todo
    </div>
  </div>
</div>

Anatomy

HTML structure of the Combobox component.

div.uc-combobox-wrapper                  ← Root (relative positioning)
├── input.uc-input                          ← Search input
└── div.uc-dropdown-menu                    ← Dropdown panel
    ├── div.uc-combobox-group               ← Optional group
    │   ├── div (label)                    ← Group heading
    │   └── div.uc-combobox-item            ← Option
    │       ├── svg / span                 ← Check icon or spacer
    │       └── text                       ← Option label
    └── div.uc-combobox-empty               ← No results message

API Reference

All CSS classes available for the Combobox component.

Class	Type	Description
`uc-combobox-wrapper`	Base	Root wrapper — relative positioning context
`uc-combobox-item`	Base	Individual option in the dropdown list
`uc-combobox-group`	Modifier	Groups items under a label header
`uc-combobox-tags`	Modifier	Multi-select tag container wrapping the input
`uc-combobox-tag`	Modifier	Individual tag chip in multi-select mode
`uc-combobox-button-label`	Modifier	Label text inside button-trigger variant
`uc-combobox-empty`	Modifier	Empty state message when no results match
`uc-selected`	State	Marks the currently selected item
`uc-open`	State	Shows the dropdown panel
`data-multi`	Modifier	HTML attribute on wrapper — enables multi-select mode
`data-keep-icons`	Modifier	HTML attribute — preserves icons on selection

Accessibility

Keyboard and screen reader support.

Feature	Details
Focus	Dropdown opens on input focus, closes on click outside
Keyboard	Type to filter options in real-time
Selection	Click to select — checkmark icon indicates current selection
Multi-select	Tags display selected items, X button removes them
Empty state	Shows "No results found" when filter matches nothing