Dynamic Fields

Add or remove fields conditionally at runtime. Use unregister() to clean up a field's data and state when it is removed from the form.

What this example covers:

• Conditionally showing/hiding fields with x-show
• Unregistering fields with form.unregister()
• Reading live form data with form.getValue()

Live Demo

JavaScript

The phone field starts registered but gets unregistered when the checkbox is toggled off. Unregistering removes the field from the form data and state entirely.

Alpine.data('dynamicFieldsForm', () => ({
    result: '',
    showResult: false,
    showPhone: false,
    form: Alpine.Form(
        { name: '', phone: '' },
        {
            config: {
                validationMode: 'onTouched',
                validations: {
                    name(value) {
                        if (!value) return { message: 'Name is required' };
                    },
                },
            },
        },
    ),
    togglePhone() {
        this.showPhone = !this.showPhone;
        if (!this.showPhone) {
            this.form.unregister('phone');
        }
    },
    handleSubmit(data) {
        this.showResult = true;
        this.result = JSON.stringify(Alpine.raw(data), null, 2);
    },
}));

HTML

The phone input uses both x-show (to hide visually) and x-register (to bind to the form). When showPhone is false, unregister('phone') is called to remove it from the form.

<p style="color: #64748b; font-size: 14px; margin-top: 0">
    Toggle the checkbox to add/remove the phone field. Check the form data below.
</p>

<div x-data="dynamicFieldsForm">
    <form @submit.prevent="form.submit(handleSubmit)">
        <div class="field-group">
            <label>Name</label>
            <input x-register:form="form.field('name')" type="text" placeholder="Your name" />
            <span
                class="field-error"
                x-show="!form.getFieldState('name').isValid"
                x-text="form.getFieldState('name').error"
            ></span>
        </div>
        <div class="field-group">
            <label class="inline-label">
                <input type="checkbox" @change="togglePhone()" />
                Add phone number
            </label>
        </div>
        <div class="field-group" x-show="showPhone">
            <label>Phone</label>
            <input
                x-show="showPhone"
                x-register:form="form.field('phone')"
                type="tel"
                placeholder="Phone number"
            />
        </div>
        <div class="btn-group">
            <button type="submit">Submit</button>
        </div>
    </form>
    <pre x-show="showResult" x-text="result"></pre>
    <div class="state-bar">
        <span>Form data: <strong x-text="JSON.stringify(form.getValue())"></strong></span>
    </div>
</div>

Dynamic Schema with updateSchema()

If using a schema validator like Joi, you can add or remove schema rules dynamically:

form.updateSchema({ phone: joi.string().required() }); // add
form.updateSchema({}, ['phone']); // remove