Search Bar

Primary search input.

html

<form class="sbar" role="search" style="--accent:#BFD9F2;">
  <label class="sbar__label" for="sbar-input">Search</label>
  <div class="sbar__box sbar__box--outline">
    <input id="sbar-input" class="sbar__input" type="search" placeholder="Search…">
    <button type="button" class="sbar__clear" aria-label="Clear search">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
    </button>
    <button type="submit" class="sbar__submit">Search</button>
  </div>
</form>
<style>
.sbar { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 360px; }
.sbar__label { display: block; margin-bottom: 6px; font-weight: 500; }
.sbar__box { display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 4px 4px 4px 12px; border-radius: 9px; }
.sbar__box--outline { background: #FAF7F2; border: 1.5px solid #24143026; }
.sbar__box--filled { background: #24143010; border: 1.5px solid transparent; }
.sbar__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.sbar__input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; color: #241430; outline: none; }
.sbar__input::-webkit-search-cancel-button { display: none; }
.sbar__clear { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: none; border-radius: 50%; background: #24143014; color: #241430; cursor: pointer; }
.sbar__clear:hover { background: #24143024; }
.sbar__submit { flex: none; border: none; border-radius: 6px; padding: 7px 14px; font: inherit; font-weight: 600; background: var(--accent); color: #241430; cursor: pointer; }
.sbar__submit:hover { filter: brightness(0.95); }
</style>

tailwind

<form role="search" class="block font-sans text-sm text-[#241430] max-w-[360px]">
  <label for="sbar-input-tw" class="block mb-1.5 font-medium">Search</label>
  <div class="sbar-box-tw sbar-box-tw--outline flex items-center gap-1.5 box-border pl-3 pr-1 py-1 rounded-[9px] border-[1.5px] focus-within:shadow-[0_0_0_3px_var(--tw-ring)]" style="--tw-ring:color-mix(in srgb, #BFD9F2 35%, transparent);">
    <input id="sbar-input-tw" type="search" placeholder="Search…" class="flex-1 min-w-0 border-none bg-transparent outline-none [&::-webkit-search-cancel-button]:hidden">
    <button type="button" aria-label="Clear search" class="flex-none grid place-items-center w-[22px] h-[22px] rounded-full bg-[#24143014] hover:bg-[#24143024] text-[#241430]">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></path></svg>
    </button>
    <button type="submit" class="flex-none rounded-md px-3.5 py-1.5 font-semibold hover:brightness-95" style="background:#BFD9F2;color:#241430;">Search</button>
  </div>
</form>
<style>
.sbar-box-tw--outline { background: #FAF7F2; border-color: #24143026 !important; }
.sbar-box-tw--filled { background: #24143010; border-color: transparent !important; }
</style>

react

export function SearchBar({
  label = "Search",
  placeholder = "Search…",
  hasQuery = true,
  variant = "outline",
  accent = "#BFD9F2",
}) {
  const boxStyle = variant === "filled"
    ? { background: "#24143010", border: "1.5px solid transparent" }
    : { background: "#FAF7F2", border: "1.5px solid #24143026" };
  return (
    <form role="search" style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 360 }}>
      <label htmlFor="sbar-input" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</label>
      <div style={{ display: "flex", alignItems: "center", gap: 6, boxSizing: "border-box", padding: "4px 4px 4px 12px", borderRadius: 9, ...boxStyle }}>
        <input id="sbar-input" type="search" placeholder={placeholder} style={{ flex: 1, minWidth: 0, border: "none", background: "transparent", font: "inherit", color: "#241430", outline: "none" }} />
        {hasQuery && (
          <button type="button" aria-label="Clear search" style={{ flex: "none", display: "grid", placeItems: "center", width: 22, height: 22, border: "none", borderRadius: "50%", background: "#24143014", color: "#241430", cursor: "pointer" }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" /></svg>
          </button>
        )}
        <button type="submit" style={{ flex: "none", border: "none", borderRadius: 6, padding: "7px 14px", font: "inherit", fontWeight: 600, background: accent, color: "#241430", cursor: "pointer" }}>Search</button>
      </div>
    </form>
  );
}