Debounced Input
The Debounced Input component is designed to optimize user input in applications by delaying the processing of text after a specified duration. This feature is particularly useful in scenarios where real-time input processing may be resource-intensive, such as live search functionalities or validations.
Examples
Basic Usage
This example illustrates the use of Debounced Input for both immediate and delayed text processing. Instant input processes text changes immediately, while delayed input waits for a specified duration before processing the text, minimizing unnecessary computations or API calls:
API
The Debounced Input component offers several configurable properties to tailor its functionality and appearance to suit your application's needs:
| Prop | Description | Default |
|---|---|---|
debounce | The debounce time in milliseconds. Defaults to 100.number | 100 |
fullWidth | If true, the input will take up the full width of its container.boolean | |
selectOnFocus | If true, the input will be focused during the first mount.boolean | |
error | If true, the input will show an error state.boolean | |
containerClassname | Additional classname for the input container element.string | |
size | Size of the input.string | |
start | Content to display before the input.
@deprecated Use `startAdornment` instead.ReactNode | |
end | Content to display after the input.
@deprecated Use `endAdornment` instead.ReactNode | |
startAdornment | Element to display before the Button content.ReactNode | |
endAdornment | Element to display after the Button content.ReactNode | |
onValueChange | Shortcut for the onChange value event.(value: string) => void | |
theme | Theme for the Input.InputTheme | |
inputRef | Reference to the input element.RefObject<HTMLInputElement> | |
containerRef | Reference to the container element.RefObject<HTMLDivElement> | |
blur | Method to blur the input.() => void | |
focus | Method to focus the input.() => void | |
select | Method to select the input.() => void |
Design and Usability Tips
- Visual Feedback: Implement visual cues to indicate when the input is being processed or debounced, such as a loader icon or changing the input border color. This feedback reassures users that their input is recognized and will be processed shortly.
- Adaptive Debouncing: Dynamically adjust the debounce duration based on the use case. For example, increase the duration for live search functionalities to reduce server load, but keep it minimal for local validations to maintain responsiveness.