@mshafiqyajid/react-combobox

npm install @mshafiqyajid/react-combobox

import { useState } from "react";
import { ComboboxStyled } from "@mshafiqyajid/react-combobox/styled";
import "@mshafiqyajid/react-combobox/styles.css";

const options = [
  { value: "react",  label: "React" },
  { value: "vue",    label: "Vue" },
  { value: "svelte", label: "Svelte" },
];

function App() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <ComboboxStyled
      options={options}
      value={value}
      onChange={setValue}
      placeholder="Search frameworks…"
      clearable
    />
  );
}

<ComboboxStyled
  value={value}
  onChange={setValue}
  loadOptions={async (query) => {
    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
    return res.json(); // ComboboxOption[]
  }}
  debounceMs={300}
  loadingText="Searching…"
  emptyText="No results"
  errorText="Couldn't load — try again"
/>

const options = [
  { value: "react",  label: "React",  group: "Frontend" },
  { value: "vue",    label: "Vue",    group: "Frontend" },
  { value: "django", label: "Django", group: "Backend" },
  { value: "rails",  label: "Rails",  group: "Backend" },
];

<ComboboxStyled options={options} value={value} onChange={setValue} />

<ComboboxStyled
  options={options}
  value={value}
  onChange={setValue}
  creatable
  createLabel={(q) => `Add "${q}"`}
  onCreateOption={(newValue) => {
    // add to your options list and set value
    setOptions((prev) => [...prev, { value: newValue, label: newValue }]);
    setValue(newValue);
  }}
/>

<ComboboxStyled
  options={options}
  value={value}
  onChange={setValue}
  label="Framework"
  hint="Choose your primary framework"
  placeholder="Search…"
  required
/>

{/* With validation error */}
<ComboboxStyled
  options={options}
  value={value}
  onChange={setValue}
  label="Framework"
  invalid
  error="Please select a framework"
/>

import { useCombobox } from "@mshafiqyajid/react-combobox";

const options = [
  { value: "react", label: "React" },
  { value: "vue",   label: "Vue" },
];

const {
  inputProps,
  listboxProps,
  getOptionProps,
  isOpen,
  filteredOptions,
  selectedOption,
  clearSelection,
} = useCombobox({ options, value, onChange });

return (
  <div style={{ position: "relative" }}>
    <input {...inputProps} placeholder="Search…" />
    {isOpen && (
      <ul {...listboxProps} className="listbox">
        {filteredOptions.map((opt, i) => (
          <li key={opt.value} {...getOptionProps(opt, i)}>
            {opt.label}
          </li>
        ))}
      </ul>
    )}
  </div>
);