Skip to main content
Version: 3.0.0-beta


DebouncedTextField is a variation of the standard TextField component designed to delay the invocation of the onChange callback. This delay helps in reducing the number of onChange calls for inputs that may have frequent updates, such as during typing.


To use DebouncedTextField, import it from your components. It supports all the TextField props including value, onChange among others.

Basic DebouncedTextField

This example shows a basic usage of the DebouncedTextField, demonstrating how it can be used to handle value changes with a defer mechanism to reduce the number of updates.

import React, { useState } from "react";
import { DebouncedTextField } from "@firecms/ui";

export default function DebouncedTextFieldBasicDemo() {
const [value, setValue] = useState("");

const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {

return (
Sign up to our newsletter to get the latest news and updates. No spam!