Combobox

Recipe CSS

This is the exact CSS your kit ships for Combobox — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Combobox ===
   Autocomplete input — trigger looks like a select but opens a filtered list.
   Used in command palette style but inline-anchored. */
.combobox { position: relative; }
/* Absolute by default — in real apps combobox always floats above content.
   Use .combobox__pop--inline to flow inline (rare, e.g. for nested forms). */
/* Combobox dropdown — same overlay grammar as .menu (overlay surface, soft
 * shadow, sub-tile scrollbar). Items follow the SM row grammar so a long
 * autocomplete list reads with the same rhythm as the dropdown menu. */
.combobox__pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 200px;
  background: var(--k-surface-overlay, var(--k-surface-raised));
  border: var(--k-hairline, 1px solid var(--k-border));
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-lg, var(--k-shadow-md));
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: var(--k-type-small);
  animation: var(--k-anim-menu, k-menu-roll 180ms cubic-bezier(.05,.7,.1,1) both);
  transform-origin: top;
  z-index: var(--k-z-dropdown);
  /* Container exposes its nested radius for child items (outer − padding).
   * Without this, the first/last item's hover state would have an 8px corner
   * that doesn't visually nest inside a 10-12px container corner. */
  --k-nest-radius: max(2px, calc(var(--k-radius-md) - 4px));
}
.combobox__pop--inline { position: static; }
.combobox__list { list-style: none; padding: var(--k-s-4); margin: 0; }
.combobox__item {
  display: flex;
  align-items: center;
  gap: var(--k-row-gap, 10px);
  padding: 0 var(--k-row-px, 10px);
  min-height: var(--k-row-h-sm, 28px);
  border-radius: var(--k-nest-radius, var(--k-row-radius, 6px));
  cursor: pointer;
}
.combobox__item:hover, .combobox__item--on { background: var(--k-state-hover); }
.combobox__item--selected .combobox__check { color: var(--k-primary); }
.combobox__check { width: 14px; flex: none; color: transparent; }
.combobox__empty { padding: var(--k-s-10); text-align: center; color: var(--k-fg-faint); font-size: var(--k-type-small); }
/* Loading: an async result fetch in flight — a spinner + label instead of a blank
 * pop or a premature "no results". Swap to __empty once the (empty) results land. */
.combobox__loading { display: flex; align-items: center; justify-content: center; gap: var(--k-s-8); padding: var(--k-s-10); color: var(--k-fg-muted); font-size: var(--k-type-small); }