Combobox — Veritheme

Default

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

html

<div class="vt-relative vt-combobox-wrapper">
  <input onfocus="openCombobox('cb1')" type="text" placeholder="Search..." class="vt-input" />
  <div id="cb1" class="vt-dropdown-menu vt-w-full vt-mt-1">
    <div class="vt-combobox-item" onclick="selectComboboxItem(this)">Next.js</div>
    <div class="vt-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="vt-relative vt-combobox-wrapper" data-keep-icons="true">
  <div class="vt-relative">
    <svg class="vt-absolute vt-left-3 vt-top-1/2 vt--translate-y-1/2 vt-w-4 vt-h-4 vt-text-mains-quaternary">...</svg>
    <input type="text" placeholder="Search..." onfocus="openCombobox('cb-groups')" class="vt-input vt-pl-9" />
  </div>
  <div id="cb-groups" class="vt-dropdown-menu vt-w-full vt-mt-1">
    <div class="vt-combobox-group">
      <div class="vt-text-xs vt-font-semibold vt-text-mains-quaternary vt-px-2 vt-py-1.5">Suggestions</div>
      <div class="vt-combobox-item" onclick="selectComboboxItem(this)">
        <svg class="vt-w-4 vt-h-4">...</svg>
        Calendar
      </div>
      <div class="vt-combobox-item" onclick="selectComboboxItem(this)">
        <svg class="vt-w-4 vt-h-4">...</svg>
        Search
      </div>
    </div>
    <div class="vt-h-[0.5px] vt-bg-border-default vt-my-1"></div>
    <div class="vt-combobox-group">
      <div class="vt-text-xs vt-font-semibold vt-text-mains-quaternary vt-px-2 vt-py-1.5">Results</div>
      <div class="vt-combobox-item" onclick="selectComboboxItem(this)">
        <svg class="vt-w-4 vt-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="vt-relative vt-combobox-wrapper" data-multi="true">
  <div class="vt-combobox-tags vt-flex vt-flex-wrap vt-items-center vt-gap-1.5 vt-min-h-[2.5rem] vt-w-full vt-rounded-lg vt-border vt-border-border-strong vt-bg-surfaces-surface vt-px-3 vt-py-1.5">
    <span class="vt-combobox-tag vt-inline-flex vt-items-center vt-gap-1 vt-rounded vt-bg-surfaces-subtle vt-px-2 vt-py-0.5 vt-text-xs vt-font-medium">
      React
      <button type="button" onclick="removeComboboxTag(this)"><svg class="vt-w-3 vt-h-3">...</svg></button>
    </span>
    <input type="text" onfocus="openCombobox('cb-multi')" class="vt-flex-1 vt-min-w-[40px] vt-bg-transparent vt-text-sm" />
  </div>
  <div id="cb-multi" class="vt-dropdown-menu vt-w-full vt-mt-1">
    <div class="vt-combobox-item vt-selected" onclick="toggleMultiComboboxItem(this)">
      <svg class="vt-w-4 vt-h-4">...</svg>
      React
    </div>
    <div class="vt-combobox-item" onclick="toggleMultiComboboxItem(this)">
      <span class="vt-w-4 vt-h-4"></span>
      Angular
    </div>
  </div>
</div>

With Button Trigger

Combobox with a button trigger instead of an input field.

html

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

Anatomy

HTML structure of the Combobox component.

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

API Reference

All CSS classes available for the Combobox component.

Class	Type	Description
`vt-combobox-wrapper`	Base	Root wrapper — relative positioning context
`vt-combobox-item`	Base	Individual option in the dropdown list
`vt-combobox-group`	Modifier	Groups items under a label header
`vt-combobox-tags`	Modifier	Multi-select tag container wrapping the input
`vt-combobox-tag`	Modifier	Individual tag chip in multi-select mode
`vt-combobox-button-label`	Modifier	Label text inside button-trigger variant
`vt-combobox-empty`	Modifier	Empty state message when no results match
`vt-selected`	State	Marks the currently selected item
`vt-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