Search Bar

Overview

Search Bar is a purpose-built Input for searching and filtering. It shows a leading search icon and, once text is entered, a trailing clear button that empties the field. It renders inside a semantic <search> landmark, so assistive technology can identify it as the page’s search region.

It is a controlled component: you pass the query string with searchQuery, updating it from setSearchQuery on every change. This makes it easy to drive live filtering or debounce the value before querying.

Usage

Import the component:

import { SearchBar } from "@eqtylab/equality";

Hold the query in state and pass it back through setSearchQuery:

const [searchQuery, setSearchQuery] = useState("");

<SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />;

Then filter your data from searchQuery:

const results = items.filter((item) =>
  item.name.toLowerCase().includes(searchQuery.toLowerCase()),
);

Default

Custom Placeholder

The placeholder defaults to “Search…”. Override it with the placeholder prop to hint at what’s being searched.

<SearchBar
  searchQuery={searchQuery}
  setSearchQuery={setSearchQuery}
  placeholder="Search policies..."
/>

Props