SearchInput

Popular

Search input with debounce and loading state.

formsearchinput

import { SearchInput } from "@/components/ui";

SearchInput Preview

⌘K

Code

tsx

<SearchInput
  placeholder="Search..."
  onChange={(value) => setSearchQuery(value)}
/>

Custom debounce delay

1<SearchInput
2  placeholder="Search users..."
3  debounce={500}
4  onChange={handleSearch}
5/>

Show loading state while searching

1<SearchInput
2  placeholder="Search..."
3  loading={isSearching}
4  onChange={handleSearch}
5/>

Configure your app with the features you need and download production-ready code.