Search Suggestion

Suggested query/value.

html

<div class="ssug ssug--graphs" style="--accent:#D9C8F0;">
  <label class="ssug__label" for="ssug-input">Search</label>
  <input id="ssug-input" class="ssug__input" type="search" role="combobox" aria-expanded="true" aria-controls="ssug-list" aria-activedescendant="opt-graphs" value="gra">
  <ul id="ssug-list" class="ssug__list" role="listbox">
    <li id="opt-graphs" class="ssug__opt" role="option" aria-selected="false">Graphs &amp; charts</li>
    <li id="opt-grants" class="ssug__opt" role="option" aria-selected="false">Grants overview</li>
    <li id="opt-gradients" class="ssug__opt" role="option" aria-selected="false">Gradient presets</li>
  </ul>
</div>
<style>
.ssug { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 260px; position: relative; }
.ssug__label { display: block; margin-bottom: 6px; font-weight: 500; }
.ssug__input { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143026; border-radius: 8px 8px 0 0; }
.ssug__input:focus-visible { outline: none; border-color: var(--accent); }
.ssug__list { list-style: none; margin: 0; padding: 4px; background: #FAF7F2; border: 1.5px solid #24143026; border-top: none; border-radius: 0 0 8px 8px; }
.ssug__opt { padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.ssug__opt:hover { background: #24143010; }
.ssug--graphs #opt-graphs, .ssug--grants #opt-grants, .ssug--gradients #opt-gradients { background: var(--accent); font-weight: 600; }
</style>

tailwind

<div class="ssug-tw ssug-tw--graphs block font-sans text-sm text-[#241430] max-w-[260px] relative" style="--tw-accent:#D9C8F0;">
  <label for="ssug-input-tw" class="block mb-1.5 font-medium">Search</label>
  <input id="ssug-input-tw" type="search" role="combobox" aria-expanded="true" aria-controls="ssug-list-tw" aria-activedescendant="opt-tw-graphs" value="gra" class="w-full box-border px-2.5 py-2 bg-[#FAF7F2] border-[1.5px] border-[#24143026] rounded-t-lg focus-visible:outline-none">
  <ul id="ssug-list-tw" role="listbox" class="list-none m-0 p-1 bg-[#FAF7F2] border-[1.5px] border-t-0 border-[#24143026] rounded-b-lg">
    <li id="opt-tw-graphs" role="option" aria-selected="false" class="px-2 py-1.5 rounded-md hover:bg-[#24143010]">Graphs &amp; charts</li>
    <li id="opt-tw-grants" role="option" aria-selected="false" class="px-2 py-1.5 rounded-md hover:bg-[#24143010]">Grants overview</li>
    <li id="opt-tw-gradients" role="option" aria-selected="false" class="px-2 py-1.5 rounded-md hover:bg-[#24143010]">Gradient presets</li>
  </ul>
</div>
<style>
.ssug-tw--graphs #opt-tw-graphs, .ssug-tw--grants #opt-tw-grants, .ssug-tw--gradients #opt-tw-gradients { font-weight: 600; background: color-mix(in srgb, var(--tw-accent, #241430) 30%, transparent); }
</style>

react

export function SearchSuggestion({
  label = "Search",
  query = "gra",
  highlighted = "graphs",
  accent = "#D9C8F0",
}) {
  const options = [
    { id: "graphs", text: "Graphs & charts" },
    { id: "grants", text: "Grants overview" },
    { id: "gradients", text: "Gradient presets" },
  ];
  return (
    <div style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 260, position: "relative" }}>
      <label htmlFor="ssug-input" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</label>
      <input id="ssug-input" type="search" role="combobox" aria-expanded="true" aria-controls="ssug-list" aria-activedescendant={`opt-${highlighted}`} defaultValue={query} style={{
        width: "100%", boxSizing: "border-box", padding: "9px 11px", font: "inherit", color: "#241430",
        background: "#FAF7F2", border: "1.5px solid #24143026", borderRadius: "8px 8px 0 0",
      }} />
      <ul id="ssug-list" role="listbox" style={{ listStyle: "none", margin: 0, padding: 4, background: "#FAF7F2", border: "1.5px solid #24143026", borderTop: "none", borderRadius: "0 0 8px 8px" }}>
        {options.map((opt) => (
          <li key={opt.id} id={`opt-${opt.id}`} role="option" aria-selected={opt.id === highlighted} style={{
            padding: "7px 8px", borderRadius: 6, cursor: "pointer",
            background: opt.id === highlighted ? accent : "transparent",
            fontWeight: opt.id === highlighted ? 600 : 400,
          }}>{opt.text}</li>
        ))}
      </ul>
    </div>
  );
}