Search Input

Below is an example of how to implement a search input that displays the current search value using React state. The SearchInput component includes a built-in 300ms debounce to prevent excessive callbacks when typing:

Search with Navigation

Below is an example of how to implement a search input with navigation controls. The navigation buttons (previous, next, and clear) appear when you start typing.

Navigation:

• Click the ↑ button or press Shift+Enter to go to the previous result
• Click the ↓ button or press Enter to go to the next result
• Click the × button to clear the search
• Click the ⌘F badge or press ⌘F (Mac) / Ctrl+F (Windows/Linux) to focus the search input

Usage

import { SearchInput } from '@harnessio/ui/components'

//...

return (
    <SearchInput
        placeholder="Type to search..."
        onChange={(value) => setSearchValue(value)}
  />
)

API Reference

Prop	Required	Default	Type
debounce	false	300	number | boolean
wrapperClassName	false		string
label	false		string
caption	false		string
error	false		string
warning	false		string
optional	false	false	boolean
id	false		string
disabled	false	false	boolean
className	false		string
inputContainerClassName	false		string
theme	false	'default'	'default' | 'success' | 'danger' | 'warning'
size	false	'md'	'md' | 'sm'
suffix	false		ReactNode
value	false		string
defaultValue	false		string
onChange	false		(value: string) => void
placeholder	false	Search	string
readOnly	false	false	boolean
showPrevNextButtons	false	false	boolean
counter	false		string
onEnter	false		(text: string, reverse?: boolean) => void
onPrev	false		(text: string) => void
onNext	false		(text: string) => void
onKeyDown	false		(event: React.KeyboardEvent<HTMLInputElement>) => void