Skip to content

Alpine.Form()

Creates a form instance. Returns a plain object designed to be used inside x-data.

js
form: Alpine.Form(data, options);

Arguments:

NameTypeDefaultDescription
dataObjectInitial field values
options.schemaObject{}Schema for validator function
options.configObject{}Config overrides (see Configuration)
options.extrasObject{}Extra data included in field change events

Example:

js
Alpine.data('myComponent', () => ({
    form: Alpine.Form(
        { name: '', email: '' },
        {
            schema: {
                /* Joi schema rules */
            },
            config: {
                validationMode: 'onTouched',
                validations: {
                    /* per-field functions */
                },
            },
            extras: { formId: 'signup' },
        },
    ),
}));

Released under the MIT License.