SearchInput

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:

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