Combobox

<!-- Combobox: Country Selector -->
<div class="combobox" data-state="closed">
  <label for="country-input" class="combobox__label">Country</label>
  <div class="combobox__wrapper">
    <input
      id="country-input"
      type="text"
      role="combobox"
      aria-expanded="false"
      aria-controls="country-listbox"
      aria-autocomplete="list"
      aria-activedescendant=""
      autocomplete="off"
      placeholder="Search countries…"
      class="combobox__input"
    />
    <button
      type="button"
      tabindex="-1"
      aria-label="Toggle country list"
      class="combobox__trigger"
    >
      <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="2"/>
      </svg>
    </button>
  </div>

  <ul
    id="country-listbox"
    role="listbox"
    aria-label="Countries"
    class="combobox__listbox"
    hidden
  >
    <li role="option" id="opt-us" aria-selected="false">United States</li>
    <li role="option" id="opt-uk" aria-selected="false">United Kingdom</li>
    <li role="option" id="opt-de" aria-selected="false">Germany</li>
    <li role="option" id="opt-fr" aria-selected="false">France</li>
    <li role="option" id="opt-jp" aria-selected="false">Japan</li>
  </ul>

  <div class="combobox__live" aria-live="polite" aria-atomic="true" class="sr-only"></div>
</div>

<style>
.combobox__label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
  color: var(--color-neutral-900);
}

.combobox__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.combobox__input {
  width: 100%;
  height: 40px;
  padding: 0 2.25rem 0 0.75rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md, 8px);
  font-size: 0.875rem;
  color: var(--color-neutral-900);
  background: var(--color-white);
  outline: none;
  transition: border-color 150ms ease;
}

.combobox__input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.combobox__trigger {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-neutral-500);
  padding: 0.25rem;
}

.combobox__listbox {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: 0.25rem;
  margin: 0;
  z-index: var(--z-dropdown, 50);
}

.combobox__listbox [role="option"] {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-neutral-800);
}

.combobox__listbox [role="option"][aria-selected="true"] {
  background: var(--color-primary-50);
  color: var(--color-primary-800);
}

.combobox__listbox [role="option"]:hover,
.combobox__listbox [role="option"].highlighted {
  background: var(--color-neutral-100);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

<script>
// Minimal combobox behavior (production code should use a library)
const input = document.getElementById("country-input");
const listbox = document.getElementById("country-listbox");
const options = listbox.querySelectorAll("[role='option']");
const liveRegion = document.querySelector(".combobox__live");
let highlightIdx = -1;

input.addEventListener("focus", () => openListbox());
input.addEventListener("input", () => {
  const q = input.value.toLowerCase();
  let visible = 0;
  options.forEach((opt) => {
    const match = opt.textContent.toLowerCase().includes(q);
    opt.hidden = !match;
    if (match) visible++;
  });
  liveRegion.textContent = visible + " results available";
  highlightIdx = -1;
  openListbox();
});

input.addEventListener("keydown", (e) => {
  const visibleOpts = [...options].filter((o) => !o.hidden);
  if (e.key === "ArrowDown") {
    e.preventDefault();
    highlightIdx = Math.min(highlightIdx + 1, visibleOpts.length - 1);
    updateHighlight(visibleOpts);
  } else if (e.key === "ArrowUp") {
    e.preventDefault();
    highlightIdx = Math.max(highlightIdx - 1, 0);
    updateHighlight(visibleOpts);
  } else if (e.key === "Enter" && highlightIdx >= 0) {
    e.preventDefault();
    selectOption(visibleOpts[highlightIdx]);
  } else if (e.key === "Escape") {
    closeListbox();
  }
});

function openListbox() {
  listbox.hidden = false;
  input.setAttribute("aria-expanded", "true");
}

function closeListbox() {
  listbox.hidden = true;
  input.setAttribute("aria-expanded", "false");
  input.setAttribute("aria-activedescendant", "");
}

function updateHighlight(visibleOpts) {
  options.forEach((o) => o.classList.remove("highlighted"));
  if (visibleOpts[highlightIdx]) {
    visibleOpts[highlightIdx].classList.add("highlighted");
    input.setAttribute("aria-activedescendant", visibleOpts[highlightIdx].id);
    visibleOpts[highlightIdx].scrollIntoView({ block: "nearest" });
  }
}

function selectOption(opt) {
  input.value = opt.textContent;
  options.forEach((o) => o.setAttribute("aria-selected", "false"));
  opt.setAttribute("aria-selected", "true");
  closeListbox();
}

options.forEach((opt) => {
  opt.addEventListener("click", () => selectOption(opt));
});

document.addEventListener("click", (e) => {
  if (!e.target.closest(".combobox")) closeListbox();
});
</script>

import React, { useState, useRef, useEffect, useId, useCallback } from "react";

interface Option {
  value: string;
  label: string;
  disabled?: boolean;
}

interface ComboboxProps {
  options: Option[];
  value?: string;
  onChange?: (value: string) => void;
  onInputChange?: (query: string) => void;
  placeholder?: string;
  label: string;
  error?: string;
  disabled?: boolean;
  loading?: boolean;
  emptyMessage?: string;
  clearable?: boolean;
}

export function Combobox({
  options,
  value,
  onChange,
  onInputChange,
  placeholder = "Search…",
  label,
  error,
  disabled = false,
  loading = false,
  emptyMessage = "No results found",
  clearable = true,
}: ComboboxProps) {
  const id = useId();
  const listboxId = `${id}-listbox`;
  const errorId = error ? `${id}-error` : undefined;
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLUListElement>(null);

  const [query, setQuery] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [highlightIndex, setHighlightIndex] = useState(-1);
  const [announcement, setAnnouncement] = useState("");

  const filtered = options.filter((o) =>
    o.label.toLowerCase().includes(query.toLowerCase())
  );

  const selectedOption = options.find((o) => o.value === value);

  const open = useCallback(() => {
    if (!disabled) setIsOpen(true);
  }, [disabled]);

  const close = useCallback(() => {
    setIsOpen(false);
    setHighlightIndex(-1);
  }, []);

  const select = useCallback(
    (opt: Option) => {
      onChange?.(opt.value);
      setQuery(opt.label);
      close();
    },
    [onChange, close]
  );

  useEffect(() => {
    if (isOpen) {
      setAnnouncement(`${filtered.length} result${filtered.length !== 1 ? "s" : ""} available`);
    }
  }, [filtered.length, isOpen]);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        if (!isOpen) { open(); return; }
        setHighlightIndex((i) => Math.min(i + 1, filtered.length - 1));
        break;
      case "ArrowUp":
        e.preventDefault();
        setHighlightIndex((i) => Math.max(i - 1, 0));
        break;
      case "Enter":
        e.preventDefault();
        if (highlightIndex >= 0 && filtered[highlightIndex]) {
          select(filtered[highlightIndex]);
        }
        break;
      case "Escape":
        close();
        break;
    }
  };

  const activeDescendant =
    highlightIndex >= 0 && filtered[highlightIndex]
      ? `${id}-opt-${filtered[highlightIndex].value}`
      : undefined;

  return (
    <div style={{ position: "relative" }}>
      <label htmlFor={`${id}-input`} style={{ display: "block", fontWeight: 600, fontSize: "0.875rem", marginBottom: 4 }}>
        {label}
      </label>

      <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
        <input
          ref={inputRef}
          id={`${id}-input`}
          type="text"
          role="combobox"
          aria-expanded={isOpen}
          aria-controls={listboxId}
          aria-autocomplete="list"
          aria-activedescendant={activeDescendant}
          aria-invalid={!!error}
          aria-describedby={errorId}
          autoComplete="off"
          disabled={disabled}
          placeholder={selectedOption?.label ?? placeholder}
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            onInputChange?.(e.target.value);
            open();
            setHighlightIndex(-1);
          }}
          onFocus={open}
          onKeyDown={handleKeyDown}
          style={{
            width: "100%",
            height: 40,
            padding: "0 2.25rem 0 0.75rem",
            border: `1px solid ${error ? "var(--color-error-600)" : "var(--color-neutral-300)"}`,
            borderRadius: "var(--radius-md, 8px)",
            fontSize: "0.875rem",
            outline: "none",
          }}
        />
        {clearable && value && (
          <button
            type="button"
            aria-label="Clear selection"
            onClick={() => { onChange?.(""); setQuery(""); inputRef.current?.focus(); }}
            style={{ position: "absolute", right: "2rem", background: "none", border: "none", cursor: "pointer", color: "var(--color-neutral-400)" }}
          >
            ✕
          </button>
        )}
      </div>

      {isOpen && (
        <ul
          ref={listRef}
          id={listboxId}
          role="listbox"
          aria-label={label}
          style={{
            position: "absolute",
            top: "calc(100% + 4px)",
            left: 0,
            right: 0,
            maxHeight: 240,
            overflowY: "auto",
            background: "var(--color-white)",
            border: "1px solid var(--color-neutral-200)",
            borderRadius: "var(--radius-md, 8px)",
            boxShadow: "var(--shadow-lg)",
            listStyle: "none",
            padding: "0.25rem",
            margin: 0,
            zIndex: 50,
          }}
        >
          {loading ? (
            <li style={{ padding: "0.75rem", textAlign: "center", color: "var(--color-neutral-500)" }}>Loading…</li>
          ) : filtered.length === 0 ? (
            <li style={{ padding: "0.75rem", textAlign: "center", color: "var(--color-neutral-500)" }}>{emptyMessage}</li>
          ) : (
            filtered.map((opt, idx) => (
              <li
                key={opt.value}
                id={`${id}-opt-${opt.value}`}
                role="option"
                aria-selected={opt.value === value}
                aria-disabled={opt.disabled}
                onClick={() => !opt.disabled && select(opt)}
                onMouseEnter={() => setHighlightIndex(idx)}
                style={{
                  padding: "0.5rem 0.75rem",
                  borderRadius: "var(--radius-sm, 4px)",
                  cursor: opt.disabled ? "not-allowed" : "pointer",
                  background: idx === highlightIndex ? "var(--color-primary-50)" : opt.value === value ? "var(--color-neutral-50)" : "transparent",
                  opacity: opt.disabled ? 0.5 : 1,
                  fontSize: "0.875rem",
                }}
              >
                {opt.label}
              </li>
            ))
          )}
        </ul>
      )}

      <div aria-live="polite" aria-atomic="true" style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)" }}>
        {announcement}
      </div>

      {error && (
        <p id={errorId} role="alert" style={{ color: "var(--color-error-600)", fontSize: "0.8125rem", marginTop: 4 }}>{error}</p>
      )}
    </div>
  );
}