Check with the server

Pass useAsyncCheck a function that takes the value and resolves to a message, or to undefined when the value is fine. Spread the props it returns onto the field, next to input.

'use server';

export async function checkHandle(handle: string) {
  return (await handleExists(handle))
    ? 'This username is already taken'
    : undefined;
}

const handle = form.field('handle');
const taken = useAsyncCheck(checkHandle);

<input {...handle.input} {...taken.props} />
{handle.error !== undefined && <p>{handle.error}</p>}
<button disabled={taken.isChecking} type="submit">
  Sign up
</button>

A Server Action works as the function as it is.

The answer is applied to the field with setCustomValidity, so it is treated like a built-in check and its message arrives in field()’s error. Nothing separate is needed to show it.

isChecking is true while an answer is outstanding. Disable the submit button with it, and nothing is sent before the answer is in.

It asks only when the person leaves the field, never on every keystroke.

A few more rules keep it from asking needlessly or showing a stale answer.

• Leaving the field with the same value the last answer was about does not ask again.
• When answers arrive out of order, only the one for the newest value is used.
• Emptying the field and leaving it clears the last answer.
• When the request itself fails, nothing is shown; the server still checks the submission.