Autocomplete

Suggests matching values during entry.

html

<div class="ac" style="--accent:#BFD9F2;">
  <label class="ac__label" for="ac-input">City</label>
  <div class="ac__combo ac__combo--open" role="combobox" aria-haspopup="listbox" aria-owns="ac-listbox" aria-expanded="true">
    <input id="ac-input" class="ac__input" type="text" role="textbox" aria-autocomplete="list" aria-controls="ac-listbox" aria-activedescendant="ac-opt-1" placeholder="Start typing a city…" value="San" autocomplete="off" style="border-radius:10px;">
    <ul id="ac-listbox" class="ac__listbox" role="listbox" aria-label="City suggestions">
      <li id="ac-opt-1" class="ac__option ac__option--active" role="option" aria-selected="true">San Francisco</li>
      <li id="ac-opt-2" class="ac__option" role="option" aria-selected="false">San Antonio</li>
      <li id="ac-opt-3" class="ac__option" role="option" aria-selected="false">San Diego</li>
    </ul>
  </div>
</div>
<style>
.ac { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 300px; }
.ac__label { display: block; margin-bottom: 6px; font-weight: 500; }
.ac__combo { position: relative; }
.ac__input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; }
.ac__input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.ac__listbox { list-style: none; margin: 4px 0 0; padding: 4px; border: 1.5px solid #24143020; background: #FAF7F2; box-shadow: 0 8px 20px #24143022; display: none; max-height: 180px; overflow: auto; }
.ac__combo--open .ac__listbox { display: block; }
.ac__option { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.ac__option:hover, .ac__option--active { background: var(--accent); }
</style>

tailwind

<div class="max-w-[300px] font-sans text-sm text-[#241430]">
  <label class="block mb-1.5 font-medium" for="ac-input-tw">City</label>
  <div class="relative" role="combobox" aria-haspopup="listbox" aria-owns="ac-listbox-tw" aria-expanded="true">
    <input id="ac-input-tw" type="text" role="textbox" aria-autocomplete="list" aria-controls="ac-listbox-tw" aria-activedescendant="ac-opt-tw-1" placeholder="Start typing a city…" value="San" autocomplete="off"
      class="w-full box-border px-3 py-2.5 text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143040] focus-visible:outline-none"
      style="border-radius:10px;">
    <ul id="ac-listbox-tw" role="listbox" aria-label="City suggestions"
      class="ac-tw-list block list-none m-0 mt-1 p-1 border-[1.5px] border-[#24143020] bg-[#FAF7F2] shadow-lg max-h-[180px] overflow-auto">
      <li id="ac-opt-tw-1" role="option" aria-selected="true" class="px-2.5 py-2 rounded-md cursor-pointer" style="background:#BFD9F2;">San Francisco</li>
      <li id="ac-opt-tw-2" role="option" aria-selected="false" class="px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143014]">San Antonio</li>
      <li id="ac-opt-tw-3" role="option" aria-selected="false" class="px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143014]">San Diego</li>
    </ul>
  </div>
</div>
<style>
.ac-tw-list:focus-within { outline: none; }
input:focus-visible { border-color: var(--tw-accent, #24143040); }
</style>

react

export function Autocomplete({
  label = "City",
  placeholder = "Start typing a city…",
  query = "San",
  open = true,
  accent = "#BFD9F2",
  radius = 10,
}) {
  return (
    <div style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 300 }}>
      <label htmlFor="ac-input-r" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</label>
      <div style={{ position: "relative" }} role="combobox" aria-haspopup="listbox" aria-owns="ac-listbox-r" aria-expanded={open}>
        <input
          id="ac-input-r"
          type="text"
          role="textbox"
          aria-autocomplete="list"
          aria-controls="ac-listbox-r"
          aria-activedescendant="ac-opt-r-1"
          placeholder={placeholder}
          defaultValue={query}
          autoComplete="off"
          style={{ width: "100%", boxSizing: "border-box", padding: "10px 12px", font: "inherit", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143040", borderRadius: radius }}
        />
        <ul id="ac-listbox-r" role="listbox" aria-label={label + " suggestions"} style={{
          display: open ? "block" : "none", listStyle: "none", margin: "4px 0 0", padding: 4,
          border: "1.5px solid #24143020", background: "#FAF7F2", boxShadow: "0 8px 20px #24143022", maxHeight: 180, overflow: "auto",
        }}>
          <li id="ac-opt-r-1" role="option" aria-selected="true" style={{ padding: "8px 10px", borderRadius: 6, cursor: "pointer", background: accent }}>{query} Francisco</li>
          <li id="ac-opt-r-2" role="option" aria-selected="false" style={{ padding: "8px 10px", borderRadius: 6, cursor: "pointer" }}>{query} Antonio</li>
          <li id="ac-opt-r-3" role="option" aria-selected="false" style={{ padding: "8px 10px", borderRadius: 6, cursor: "pointer" }}>{query} Diego</li>
        </ul>
      </div>
    </div>
  );
}