Auto Submit

Some forms should submit automatically without a button: search filters, live previews, settings that save immediately. The autoSubmit option enables this behavior.

Basic Usage

Set autoSubmit: "auto" to submit whenever any field changes:

import React from "react";
import {  } from "zod";
import {  } from "antd-typed";
import { ,  } from "antd";

const  = .({
  : .(),
});

function () {
  const { ,  } = ({
    : ,
    : "auto",
    : () => {
      // Called on every change (debounced)
      .("Searching:", .);
    },
  });

  return (
    <>
      < ="search">
        < ="Search..." />
      </>
    </>
  );
}

How It Works

Auto submit uses a leading + trailing debounce pattern:

First change: Submits immediately (leading edge)
Rapid changes: Waits for typing to pause (trailing edge)
After debounce: Submits with final values

This gives instant feedback for discrete controls like selects and checkboxes, while still debouncing rapid text input.

User types: h-e-l-l-o
Timeline:   |-----300ms-----|
Submits:    h              hello
            ^              ^
            leading        trailing

Custom Debounce

The default debounce is 300ms. Adjust it with the config object:

const { ,  } = ({
  : ,
  : {
    : "auto",
    : 500, // Wait 500ms after last change
  },
  : () => {
    // ...
  },
});

Shorter debounce (100-200ms) feels more responsive. Longer debounce (500-1000ms) reduces server load.

Validation

Auto submit respects schema validation. Invalid values don't trigger onFinish:

import React from "react";
import {  } from "zod";
import {  } from "antd-typed";
import { ,  } from "antd";

const  = .({
  : .().(3, "Enter at least 3 characters"),
});

function () {
  const { ,  } = ({
    : ,
    : "auto",
    : () => {
      // Only called when search.length >= 3
      .();
    },
  });

  return (
    <>
      < ="search">
        < ="Search (min 3 chars)..." />
      </>
    </>
  );
}

Modes

Mode	Behavior
`"off"`	Default. No automatic submission.
`"auto"`	Submit on any field change with leading + trailing debounce.

Focus Retention

Auto submit preserves input focus during re-renders. Users can keep typing without interruption even when parent components update in response to form changes.

Try It

Basic search input with auto-submit:

Filter bar with multiple controls: