Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Build a React search bar from a native <input type="search">, a real accessible label, and controlled state. Keep the query in the component that owns the results, then pass the value and a change handler to the reusable search component. Use a form when users submit a query; update results as they type when the data is local and should filter immediately.
Choose how the search should work
Decide what a keystroke should do before building the component. The choice affects where results update and whether a form submission or per-keypress work is appropriate.
| Behavior | When results update | Typical fit | Work to consider |
|---|---|---|---|
| Submit search | When the user presses Enter or activates the submit button | Query navigation, a search-results page, or a request that should run only after submission | Handle the form’s submit event; decide whether the query belongs in the URL or triggers remote work. |
| Live filtering | As the user types | A local list that should narrow immediately | Filter the data from the current query. If each keystroke triggers costly remote work, consider an appropriate performance strategy rather than assuming every search must be debounced. |
Both patterns can use the same reusable input component. The parent should own the query when that value determines which results are shown.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Build a controlled, reusable SearchBar
This component accepts a string value, an input-change callback, and a form-submit callback. The label remains available to assistive technology even when the visual design hides it.
#1 Best Overall
function SearchBar({ value, onChange, onSubmit }) {
return (
<form role="search" onSubmit={onSubmit}>
<label className="visually-hidden" htmlFor="site-search">
Search items
</label>
<input
id="site-search"
type="search"
name="q"
value={value}
onChange={onChange}
/>
<button type="submit">Search</button>
</form>
);
}The CSS class in this example is only a hook for your own visually-hidden styling; it is not a built-in React class. If the design allows, use a visible label instead. Do not rely on placeholder text or a magnifying-glass icon as the input’s only name.
The native search input provides search-field semantics while retaining normal browser input behavior. The form is marked as a search landmark with role="search". You can instead use the semantic <search> element where suitable; avoid layering redundant search roles onto native controls or a landmark that already identifies the search feature.
Keep the query with the results
When filtering a list, put the query state in the component that owns that list. Pass its current value and a callback down to SearchBar; the child reports edits, while the parent decides how to use them.
Free tools Windows power users keep installed
One-click scans. No signup required.
import { useState } from 'react';
const items = ['Apple', 'Apricot', 'Banana', 'Blueberry'];
function ItemFinder() {
const [query, setQuery] = useState('');
const filteredItems = items.filter((item) =>
item.toLowerCase().includes(query.trim().toLowerCase())
);
function handleSubmit(event) {
event.preventDefault();
// Run submission-specific work here, if needed.
}
return (
<>
<SearchBar
value={query}
onChange={(event) => setQuery(event.target.value)}
onSubmit={handleSubmit}
/>
<ul>
{filteredItems.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</>
);
}Here, filtering is live because each change updates query and the parent derives filteredItems from it. The submit handler prevents the browser’s default navigation so the example stays on the page; replace or extend that behavior if submitting should navigate or fetch results.
Make controlled input updates reliable
A controlled text input needs both a string value and an onChange handler that synchronously stores the current DOM value. React warns that passing value without onChange makes the input impossible to type into. Update from event.target.value directly in the handler; delaying the controlled update can disrupt typing and caret behavior. See React’s <input> reference.
- Initialize controlled text state as a string, commonly
''. - Keep it a string for the component’s full lifetime. Switching between
undefinedornulland a string changes an input between uncontrolled and controlled. - Do not debounce the state update that controls the field. If remote requests are expensive, keep the visible input responsive and apply any delay to the work triggered by the query.
Preserve form and keyboard behavior
A form lets the browser submit when the user presses Enter, and a button inside a form submits by default. Make each button’s purpose explicit: use type="submit" for the search action and type="button" for a clear control that should not submit.
For a submitted search, handle the form’s onSubmit event rather than relying only on a button click. That preserves the ordinary Enter-key path. If you use the query to navigate, encode or otherwise handle it appropriately for your application; if it requests remote results, run that work at the chosen submission point.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Give the search field an accessible name
Associate a <label> with the input using matching htmlFor and id values in JSX, or use an appropriate ARIA naming attribute when no visible label is practical. MDN says a searchbox role must have an accessible name; native type="search" does not remove that requirement. See MDN’s ARIA: searchbox role and search input reference.
Best Value
Use one clear search landmark for the feature. MDN documents the search role for identifying a search landmark, including naming guidance when a page has multiple search regions. Do not add a redundant role="searchbox" to a native search input just to restate semantics already supplied by the element.
Handle expensive filtering without making typing lag
For a small local list, filtering directly from the query is often the simplest pattern. If every keystroke causes an expensive render of a large tree, first see whether the state can live in a smaller component so unrelated parts do not re-render. React’s input documentation also describes useDeferredValue for cases where dependent rendering cannot be avoided. This is a performance option, not a requirement for every search bar; avoid claiming a specific speedup without measurements for your app.
Add autocomplete only when you implement suggestions
A search field does not need autocomplete to be useful. If you add suggestions, implement the interaction as well as the visual list: manage the active suggestion, selection, dismissal, keyboard navigation, and how results are announced to assistive technology.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minutearia-autocomplete communicates whether suggestions are inline, presented as a list, or both; it does not create the suggestions or their behavior. MDN explains the attribute’s models in its aria-autocomplete reference. Do not add it to a plain search field as if that alone enabled autocomplete.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
