Reset Form

Reset form data back to defaults and clear all validation state. Optionally pass new defaults to reset() to update what the form resets to — useful after a successful save.

What this example covers:

• Resetting to defaults with form.reset()
• Updating defaults with form.reset(newDefaults)
• Reading defaults with form.getDefaults()
• Showing dirty badges per field with getFieldState().isDirty

Live Demo

JavaScript

After a successful save, reset() is called with the submitted data as new defaults. This makes the saved values the new baseline for dirty tracking.

Alpine.data('resetForm', () => ({
    result: '',
    showResult: false,
    form: Alpine.Form(
        { name: 'John', email: 'john@example.com' },
        {
            config: { validationMode: 'onTouched' },
        },
    ),
    handleSubmit(data) {
        this.showResult = true;
        this.result = 'Saved!\n' + JSON.stringify(Alpine.raw(data), null, 2);
        this.form.reset({ ...Alpine.raw(data) });
    },
}));

HTML

Each field label shows a "modified" badge when the field is dirty. The state bar displays the current dirty state, submission state, and default values.

<p style="color: #64748b; font-size: 14px; margin-top: 0">
    Edit the fields, then click Reset to restore defaults. Save updates the defaults to current
    values.
</p>

<div x-data="resetForm">
    <form @submit.prevent="form.submit(handleSubmit)">
        <div class="field-group">
            <label>
                Name
                <span class="dirty-badge" x-show="form.getFieldState('name').isDirty"
                    >modified</span
                >
            </label>
            <input x-register:form="form.field('name')" type="text" />
        </div>
        <div class="field-group">
            <label>
                Email
                <span class="dirty-badge" x-show="form.getFieldState('email').isDirty"
                    >modified</span
                >
            </label>
            <input x-register:form="form.field('email')" type="email" />
        </div>
        <div class="btn-group">
            <button type="submit">Save</button>
            <button type="button" @click="form.reset()">Reset</button>
        </div>
    </form>
    <pre x-show="showResult" x-text="result"></pre>
    <div class="state-bar">
        <span>Dirty: <strong x-text="form.getFormState().isDirty"></strong></span>
        <span>Submitted: <strong x-text="form.getFormState().isSubmitted"></strong></span>
        <span>Defaults: <strong x-text="JSON.stringify(form.getDefaults())"></strong></span>
    </div>
</div>

API Reference

form.reset(); // restore original defaults
form.reset({ email: '', name: '' }); // set and apply new defaults
form.getDefaults(); // read current defaults

Resetting clears all state (isDirty, isTouched, isValid, errors, submission state) and restores data to defaults.