Skip to content

[6.x] Prefilled Alpine.js forms from field values - #14706

Merged
jasonvarga merged 3 commits into
statamic:6.xfrom
godismyjudge95:patch-1
Sep 1, 2026
Merged

[6.x] Prefilled Alpine.js forms from field values#14706
jasonvarga merged 3 commits into
statamic:6.xfrom
godismyjudge95:patch-1

Conversation

@godismyjudge95

Copy link
Copy Markdown
Contributor

This PR solves an issue I ran into just now.

I need to prefill in values for a form so I set up my text.antlers.html like so:

<input
    type="text"
    name="{{ handle }}"
    value="{{ old[handle] ?? get[handle] ?? value }}"
    {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
    {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
    {{ if autocomplete }}autocomplete="{{ autocomplete }}"{{ /if }}
    {{ if step }}step="{{ step }}"{{ /if }}
    {{ if js_driver }}
        {{ js_attributes }}
    {{ /if }}
    {{ if validate|contains:required }}required{{ /if }}
/>

Only problem is I am also using the Alpine.js form driver which then proceeds to clear out the prefilled value attribute. A bit of researching later and I found the .fill modifier for x-model - https://alpinejs.dev/directives/model#fill

By default, if an input has a value attribute, it is ignored by Alpine and instead, the value of the input is set to the value of the property bound using x-model.

But if a bound property is empty, then you can use an input's value attribute to populate the property by adding the .fill modifier.

Exactly what I need. The default remains the same but if the value is already filled it populates the x-model property with the value attribute's contents.

Not sure there is a way to programatically test this - if so I'd be happy to submit one.

@jasonvarga
jasonvarga merged commit 02ee461 into statamic:6.x Sep 1, 2026
61 checks passed
@godismyjudge95
godismyjudge95 deleted the patch-1 branch September 1, 2026 19:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants