Prefixed directives¶

Apply Alpine.js directives to surrounding containers directly from widget attrs, without writing any JavaScript or template code.

Syntax¶

x-<resolver>-<directive>="<value>"
@<resolver>-<directive>="<expression>"

core.js reads these attributes and moves them to the element returned by the matching resolver.

Example¶

class MyForm(forms.ModelForm):
    toggle = forms.BooleanField(
        widget=forms.CheckboxInput(attrs={
            "x-add-model-data": "showExtra",
        })
    )
    extra_field = forms.CharField(
        widget=forms.TextInput(attrs={
            # applied to the closest .form-row as x-show="showExtra"
            "x-form-row-show": "showExtra",
        })
    )

Value handling¶

Widget attr value	Applied as
Any non-empty string	`x-<directive>="<value>"`
Empty string or `"true"`	`x-<directive>=""` (boolean Alpine attribute)

Event listeners with @¶

Use @ instead of x- to apply Alpine event listeners:

attrs={
    "@form-row-click": "doSomething()",
}

This sets @click="doSomething()" on the closest .form-row.

Available resolvers¶

Built-in resolvers¶

Always available regardless of which mixin or resolvers you use:

Prefix	Target
`self`	The input element itself

Use self when you want to apply a directive directly to the input rather than a surrounding container — useful in formsets or anywhere no parent container is needed:

my_field = forms.CharField(
    widget=forms.TextInput(attrs={
        "x-self-show": "isVisible",
    })
)

Django Admin preset resolvers¶

See Django Admin preset resolvers for the full list, or Custom resolvers to define your own.