How to Enable AutoSave in Forms Using refineCoreProps in Refine-Shadcn

Set autoSave: { enabled: true } inside the refineCoreProps object when initializing the useForm hook to activate automatic form persistence without requiring a manual submit button.

Refine-Shadcn leverages the useForm hook from @refinedev/react-hook-form to power its form components. To enable automatic saving of form data as users type, you configure the refineCoreProps parameter in your hook initialization. This pattern passes configuration directly to the underlying Refine core logic, triggering update or create mutations automatically whenever field values change.

Understanding the refineCoreProps Configuration

The refineCoreProps object serves as the bridge between React Hook Form and Refine's data management layer. When you pass this object to useForm, Refine-Shadcn forwards these settings to the core Refine engine. Setting autoSave.enabled to true instructs Refine to persist form changes immediately after each field update, eliminating the need for an explicit submit button while maintaining full validation and navigation control.

Basic Implementation Pattern

At minimum, enabling auto-save requires adding the autoSave configuration to your refineCoreProps. You may also include the optional redirect property to control post-save navigation and warnWhenUnsavedChanges to protect against accidental data loss.

const { ...form } = useForm<z.Type>({
    mode: "all",
    resolver: zodResolver(formSchema),
    defaultValues: { /* your defaults */ },
    refineCoreProps: {
        autoSave: {
            enabled: true,   // Activates automatic saving
        },
        redirect,            // Optional: controls navigation after save
    },
    warnWhenUnsavedChanges: true,  // Optional: browser warning on unsaved changes
});

Template-Specific Implementation Examples

Refine-Shadcn provides consistent auto-save patterns across Vite and Next.js templates. The configuration remains identical regardless of your framework choice.

Vite React Template (User Forms)

In the Vite template's user management form, auto-save is configured on lines 41–44 of the Form component. This implementation demonstrates the pattern with Zod validation and default value initialization.

// templates/vite-react/src/pages/users/Form.tsx
const { ...form } = useForm<z.infer<typeof formSchema>>({
    mode: "all",
    resolver: zodResolver(formSchema),
    defaultValues: { firstName: "", lastName: "", email: "" },
    refineCoreProps: {
        autoSave: { enabled: true },   // Enable auto-save here
        redirect,                      // Optional redirect prop
    },
    warnWhenUnsavedChanges: true,
});

Source: templates/vite-react/src/pages/users/Form.tsx#L41-L44

Vite React Template (Post Forms)

The post creation and editing form uses the same pattern, implemented on lines 53–57. This example includes nested default values for relational data.

// templates/vite-react/src/pages/posts/Form.tsx
const { ...form } = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    mode: "all",
    defaultValues: { title: "", status: "", content: "", category: { id: "" } },
    refineCoreProps: {
        autoSave: { enabled: true },   // Auto-save enabled
        redirect,                      // Optional redirect
    },
    warnWhenUnsavedChanges: true,
});

Source: templates/vite-react/src/pages/posts/Form.tsx#L53-L57

Next.js App Router Template

The Next.js implementation follows the identical structure, located in the users components directory. Lines 41–44 contain the auto-save configuration.

// templates/nextjs/app/users/components/Form.tsx
const { ...form } = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    mode: "all",
    defaultValues: { firstName: "", lastName: "", email: "" },
    refineCoreProps: {
        autoSave: { enabled: true },   // Enable auto-save
        redirect,
    },
    warnWhenUnsavedChanges: true,
});

Source: templates/nextjs/app/users/components/Form.tsx#L41-L44

Key Configuration Options

When enabling auto-save via refineCoreProps, you can fine-tune the behavior using these properties:

• autoSave.enabled: Boolean flag that activates the automatic persistence feature. When true, Refine invokes the appropriate mutation after each valid field change.
• redirect: Optional string (e.g., "edit", "list", or "show") that determines the navigation target after a successful save operation.
• warnWhenUnsavedChanges: Optional boolean that triggers a browser-native warning dialog if the user attempts to navigate away from the page with unsaved form modifications.

Summary

• Pass refineCoreProps to the useForm hook from @refinedev/react-hook-form to access Refine's core form features.
• Set autoSave: { enabled: true } within refineCoreProps to enable automatic form persistence without submit buttons.
• Include the optional redirect property to control post-save navigation behavior.
• Add warnWhenUnsavedChanges: true to prevent accidental data loss when users navigate away from auto-saving forms.
• The implementation pattern remains consistent across Vite React and Next.js templates in the templates/ directory.

Frequently Asked Questions

What is the purpose of the redirect property in refineCoreProps?

The redirect property determines where Refine navigates the user after a successful auto-save operation. You can set it to values like "edit", "list", or "show" depending on your desired user flow. This property is optional and can be omitted if you prefer to handle navigation manually.

How does warnWhenUnsavedChanges interact with auto-save enabled?

When warnWhenUnsavedChanges is set to true alongside auto-save, the browser displays a native warning dialog if the user attempts to leave the page while changes remain unsaved. This serves as a safety net even with auto-save active, protecting against navigation during network latency or validation errors.

Which Refine hook powers the form components in refine-shadcn?

Refine-Shadcn uses the useForm hook from @refinedev/react-hook-form as its underlying form management engine. This hook accepts refineCoreProps to configure Refine-specific behaviors like auto-save, resource identification, and mutation modes.

What mutation does auto-save trigger when enabled?

According to the source code implementation, enabling autoSave.enabled tells Refine to automatically invoke the update mutation for existing records or the create mutation for new entries whenever a field value changes. This happens seamlessly in the background without requiring explicit submit button clicks.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}