Local Search

Searches within the current context.

html

<form class="lsearch" role="search" style="--accent:#A8E6C1;">
  <label class="lsearch__label" for="lsearch-input">Search</label>
  <div class="lsearch__box">
    <svg class="lsearch__icon" width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
    <input id="lsearch-input" class="lsearch__input" type="search" placeholder="Filter items…">
  </div>
  <p class="lsearch__scope">Searching within: <b>this page</b></p>
</form>
<style>
.lsearch { display: block; font: 13px system-ui, sans-serif; color: #241430; max-width: 260px; }
.lsearch__label { display: block; margin-bottom: 4px; font-weight: 500; }
.lsearch__box { display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 6px 10px; background: #FAF7F2; border: 1.5px solid #24143026; border-radius: 7px; }
.lsearch__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.lsearch__icon { flex: none; color: #24143080; }
.lsearch__input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; color: #241430; outline: none; }
.lsearch__input::-webkit-search-cancel-button { display: none; }
.lsearch__scope { margin: 6px 0 0; font-size: 11.5px; color: #24143090; }
</style>

tailwind

<form role="search" class="block font-sans text-[13px] text-[#241430] max-w-[260px]">
  <label for="lsearch-input-tw" class="block mb-1 font-medium">Search</label>
  <div class="flex items-center gap-1.5 box-border px-2.5 py-1.5 bg-[#FAF7F2] border-[1.5px] border-[#24143026] rounded-[7px] focus-within:border-current" style="--tw-accent:#A8E6C1;">
    <svg class="flex-none text-[#24143080]" width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"></circle><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
    <input id="lsearch-input-tw" type="search" placeholder="Filter items…" class="flex-1 min-w-0 border-none bg-transparent outline-none [&::-webkit-search-cancel-button]:hidden">
  </div>
  <p class="mt-1.5 text-[11.5px] text-[#24143090]">Searching within: <b>this page</b></p>
</form>

react

export function LocalSearch({
  label = "Search",
  placeholder = "Filter items…",
  scope = "page",
  accent = "#A8E6C1",
}) {
  const scopeLabel = { page: "this page", list: "this list", folder: "this folder" }[scope] ?? scope;
  return (
    <form role="search" style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", maxWidth: 260 }}>
      <label htmlFor="lsearch-input" style={{ display: "block", marginBottom: 4, fontWeight: 500 }}>{label}</label>
      <div style={{
        display: "flex", alignItems: "center", gap: 6, boxSizing: "border-box", padding: "6px 10px",
        background: "#FAF7F2", border: `1.5px solid ${accent}66`, borderRadius: 7,
      }}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{ flex: "none", color: "#24143080" }}>
          <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" />
          <path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        </svg>
        <input id="lsearch-input" type="search" placeholder={placeholder} style={{ flex: 1, minWidth: 0, border: "none", background: "transparent", font: "inherit", color: "#241430", outline: "none" }} />
      </div>
      <p style={{ margin: "6px 0 0", fontSize: 11.5, color: "#24143090" }}>Searching within: <b>{scopeLabel}</b></p>
    </form>
  );
}