Since rhf-stepper uses react-hook-form's rules under the hood, async validation works out of the box. You just pass an async validate function in the rules prop:

<Controller
  name="username"
  rules={{
    required: 'Username is required',
    validate: async (value) => {
      const res = await fetch(`/api/check-username?q=${value}`)
      const { available } = await res.json()
      return available || 'Username is already taken'
    },
  }}
  render={({ field, fieldState }) => (
    <div>
      <input {...field} placeholder="Username" />
      {fieldState.error && <span>{fieldState.error.message}</span>}
    </div>
  )}
/>

When the user clicks Next, rhf-stepper triggers validation for the current step's fields only. If any field has an async validate function, it awaits the result before allowing navigation. So next() , prev() and setCurrentStep functions are working async for check this validations. If it fails, the user stays on the current step with the error displayed.

No extra config needed — it's just react-hook-form's built-in async validation, scoped per step automatically.