DebounceInput

Pro

DebounceInput wraps Input with a configurable delay so onChange fires only after the user stops typing.

Debounced value: —

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add DebounceInput

Examples

Disabled

Search Filter

API

PropDescriptionTypeDefault
waitDebounce delay in milliseconds before onChange fires.number500
valueControlled input value.string—
placeholderPlaceholder text.string—
disabledDisables the input.booleanfalse
sizeLayout size variant.'sm' | 'default' | 'lg''default'
onChangeCalled after the debounce delay with the native change event.(e: ChangeEvent<HTMLInputElement>) => void—