app/components/search-form.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/not-found-help.tsx, app/routes/search.tsx.

Source

1import { Form } from "react-router";
2
3/**
4 * The site search box: a plain GET to /search with the query in `q`, so it works with no script.
5 * The search page and the 404 page both render it. `children` sits inside the form after the input
6 * row, for the search page's hidden filter fields and its operator hint. The `#q` id and the
7 * `.search-form` class are what app/enhance/search.ts attaches to on the search page.
8 */
9export function SearchForm({
10  defaultValue,
11  children,
12}: {
13  defaultValue?: string;
14  children?: React.ReactNode;
15}) {
16  return (
17    <Form method="get" action="/search" role="search" className="search-form">
18      <label className="search-label" htmlFor="q">
19        Search this site
20      </label>
21      <div className="search-input-row">
22        <input
23          type="search"
24          id="q"
25          name="q"
26          defaultValue={defaultValue}
27          placeholder="Try: d1, tag:cloudflare, 2026, or a quoted phrase"
28          autoComplete="off"
29          className="search-input"
30        />
31        <button type="submit" className="search-submit">
32          Search
33        </button>
34      </div>
35      {children}
36    </Form>
37  );
38}