Controlled Input

An input component with debounced value changes and Enter key submission.

Preview

Value:

Press Enter to accept the value and trigger the onAccepted callback.

Current:

Accepted:

Prop	Type	Default	Description
`value`	`string`	-	The controlled value
`onValueChanged`	`(value: string) => void`	-	Callback triggered when value changes (debounced 500ms)
`onAccepted`	`(value: string) => void`	-	Callback triggered when Enter key is pressed
`className`	`string`	-	Additional CSS classes

All other props are passed through to the underlying Input component.

Debounced Changes: The onValueChanged callback is debounced by 500ms to avoid excessive updates
Enter Key: Pressing Enter immediately triggers both onValueChanged and onAccepted callbacks, canceling any pending debounced update
External Updates: When the value prop changes externally, the component updates without triggering the onValueChanged callback