SearchInput

SearchInput

The SearchInput component is a reusable search field built on Carbon's Search component. It provides a controlled input for search queries, with custom mouse tracking logic and keyboard handling for accessibility.

Props

Name	Type	Required	Description
id	string	✅	Unique identifier for the search input
label	string	✅	Accessible label for the search input
placeholder	string	✅	Placeholder text for the input field
value	string	✅	The current value of the search input
onChange	(value: string) => void	✅	Callback fired when the input value changes

Usage

import SearchInput from '@/components/Form/SearchInput';

<SearchInput
  id="search-users"
  label="Search users"
  placeholder="Type a name..."
  value={searchValue}
  onChange={setSearchValue}
/>