Search Field

A specialized text input for search functionality, featuring a search icon and clear button. Provides familiar search UX patterns with keyboard support and accessible labeling.

Placeholder text

With delay

Search value

Component props

Name	Type	Description
label	string	Label text displayed above the field
placeholder	string	Placeholder text
value	string	Controlled value
defaultValue	string	Default value (uncontrolled)
delay	number	Debounce delay in ms before onSearch fires (default: 0)
onChange	(value: string) => void	Called on every change
onSearch	(value: string) => void	Called after delay (debounced)

Name

Type

Description

label

string

Label text displayed above the field

placeholder

string

Placeholder text

value

string

Controlled value

defaultValue

string

Default value (uncontrolled)

delay

number

Debounce delay in ms before onSearch fires (default: 0)

onChange

(value: string) => void

Called on every change

onSearch

(value: string) => void

Called after delay (debounced)