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

> Learn how to enable autoSave in forms using refineCoreProps with Refine-Shadcn. Automatically persist form data and enhance user experience without manual saves.

- Repository: [Ferdi ÜNAL/refine-shadcn](https://github.com/ferdiunal/refine-shadcn)
- Tags: how-to-guide
- Published: 2026-03-01

---

**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.

```tsx
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.

```tsx
// 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](https://github.com/ferdiunal/refine-shadcn/blob/main/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.

```tsx
// 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](https://github.com/ferdiunal/refine-shadcn/blob/main/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.

```tsx
// 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](https://github.com/ferdiunal/refine-shadcn/blob/main/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.