Alpine-FormsForm management for Alpine.js

Lightweight form state, validation, and submission for Alpine.js

Alpine-Forms

Form & field state

Track isDirty, isTouched, isValid, isSubmitting, and isSubmitted at both form and field level.

Validation modes

Validate onChange, onBlur, onTouched, onSubmit, or all — pick the mode that fits your form's UX.

Schema or custom validators

Use Joi, write your own validator function, or define per-field custom validations. No dependencies required.

Async validation

Validators can return Promises (e.g. check username availability via API). Stale results are discarded.

Manual error control

setError() and clearErrors() for server-side validation responses.

x-register directive

Auto-binds inputs, textareas, selects, checkboxes, radios, and file inputs with a single directive.

Quick Start

html

<script defer src="https://unpkg.com/alpine-forms/dist/alpine.forms.min.js"></script>
<script defer src="https://unpkg.com/alpinejs"></script>

html

<div
    x-data="{
    form: Alpine.Form(
        { email: '', password: '' },
        {
            config: {
                validations: {
                    email: (value) => !value ? { message: 'Email is required' } : undefined,
                    password: (value) => value.length < 6 ? { message: 'Min 6 characters' } : undefined,
                }
            }
        }
    )
}"
>
    <form @submit.prevent="form.submit(data => alert(JSON.stringify(data)))">
        <input x-register:form="form.field('email')" type="email" placeholder="Email" />
        <span
            x-show="!form.getFieldState('email').isValid"
            x-text="form.getFieldState('email').error"
        ></span>

        <input x-register:form="form.field('password')" type="password" placeholder="Password" />
        <span
            x-show="!form.getFieldState('password').isValid"
            x-text="form.getFieldState('password').error"
        ></span>

        <button type="submit">Submit</button>
    </form>
</div>

Next Steps

Installation — CDN and NPM setup
Usage — Forms, fields, state, submission, reset, dirty tracking
Configuration — Validation modes, field events, focus on error
Validation — Custom validators, Joi, async validation, manual errors
API Reference — Complete method and property reference
Examples — Live demos with source code