Split Search Bar Hero Block for React

The quickest way needs no code: give the form an action="/search" and remove the preventDefault from the submit handler. The browser then goes to /search?q=…, since the field is named q, and it works before any script loads. To stay in a client-side router, keep preventDefault and navigate in submit with the field's trimmed value instead. In React, call your router's navigate function there, such as router.push(`/search?q=${encodeURIComponent(query.trim())}`) in Next.js or navigate(…) in React Router. An empty search doesn't submit: the field just takes focus again.

It is a preview, not a search engine: the ARTICLES array holds each title, its section and extra keywords, and the panel keeps the articles in which every word typed appears in the title or the keywords, up to five. Replace the array with your top pages, or feed it from your search API. The rows have a fixed height and the list a fixed number of rows, so filtering never moves the page.

They are the SUGGESTIONS array: each is a small outline button that puts its words in the field and moves focus there, so the panel filters at once and the visitor can press Enter or keep typing. Keep to five to eight short terms.

The form sits in a search element and the field has an accessible name, “Search the docs”. The result count is a polite status, so a screen reader hears “3 results” as you type, and the results are a list of links with a visible focus ring. The empty state is text in the same box.

The ShineButton labelled Search is the only primary control, beside the field, and submits the form. The popular searches are outline buttons. The results are plain links.

The field and its button stay on one row down to 320 px, the popular searches wrap, and the results panel comes after the text with a rule above it and three rows, so the page stays short. The headline steps down to text-4xl.