Search Scope

Defines where search is performed.

html

<div class="sscope" style="--accent:#F5C2E0;">
  <label class="sscope__label" for="sscope-select">Search in</label>
  <select id="sscope-select" class="sscope__select" style="border-radius:8px;">
    <option value="everywhere">Everywhere</option>
    <option value="project">This project</option>
    <option value="mine">My items</option>
  </select>
  <p class="sscope__hint">Scope: <b>everywhere</b> — currently searching everywhere.</p>
</div>
<style>
.sscope { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 260px; }
.sscope__label { display: block; margin-bottom: 6px; font-weight: 500; }
.sscope__select { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143026; appearance: none; }
.sscope__select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.sscope__hint { margin: 6px 0 0; font-size: 12px; color: #24143090; }
</style>

tailwind

<div class="block font-sans text-sm text-[#241430] max-w-[260px]">
  <label for="sscope-select-tw" class="block mb-1.5 font-medium">Search in</label>
  <select id="sscope-select-tw" class="w-full box-border px-2.5 py-2 bg-[#FAF7F2] border-[1.5px] border-[#24143026] appearance-none focus-visible:outline-none focus-visible:border-[color:var(--tw-accent)] focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--tw-accent)_35%,transparent)]" style="border-radius:8px;--tw-accent:#F5C2E0;">
    <option value="everywhere">Everywhere</option>
    <option value="project">This project</option>
    <option value="mine">My items</option>
  </select>
  <p class="mt-1.5 text-xs text-[#24143090]">Scope: <b>everywhere</b> — currently searching everywhere.</p>
</div>

react

export function SearchScope({
  label = "Search in",
  scope = "everywhere",
  accent = "#F5C2E0",
  radius = 8,
}) {
  const hint = {
    everywhere: "Everywhere — results span the whole workspace.",
    project: "This project — results are limited to the current project.",
    mine: "My items — results are limited to things you own.",
  }[scope] ?? scope;
  return (
    <div style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 260 }}>
      <label htmlFor="sscope-select" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</label>
      <select id="sscope-select" defaultValue={scope} style={{
        width: "100%", boxSizing: "border-box", padding: "9px 11px", font: "inherit", color: "#241430",
        background: "#FAF7F2", border: "1.5px solid #24143026", borderRadius: radius, appearance: "none",
      }}>
        <option value="everywhere">Everywhere</option>
        <option value="project">This project</option>
        <option value="mine">My items</option>
      </select>
      <p style={{ margin: "6px 0 0", fontSize: 12, color: "#24143090" }}>{hint}</p>
    </div>
  );
}