Combobox

The WAI-ARIA 1.2 combobox pattern: a real <input role="combobox"> that keeps DOM focus the whole time you're typing, with aria-activedescendant pointing at whichever option in the role="listbox" popup is highlighted, the highlight moves, focus doesn't. popover="manual" is used deliberately here: a combobox needs its own open/close rules (open on focus or on typing, not just a single click), so outside-click and Escape dismissal are handled by hand rather than relying on popover="auto".

import { useState } from "react";
import { Combobox } from "@kernelui/react";

const frameworks = [
  { value: "astro", label: "Astro" },
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
];

function FrameworkPicker() {
  const [value, setValue] = useState("");

  return (
    <Combobox
      label="Framework"
      options={frameworks}
      value={value}
      onValueChange={setValue}
      placeholder="Search frameworks…"
    />
  );
}

Props