HTML directives
Interact directives connect HTML controls and forms to a PHP island. Use them inside an island created by InteractHelper.
Use Alpine directly for local UI behavior. @click listens for browser events, :disabled and :class bind attributes, and x-show with x-transition controls visibility. Interact adds server synchronization and rendering to these Alpine templates. See Alpine and Interact for the ownership boundary.
| Directive | Description |
|---|---|
x-interact:model | Binds a form input to a PHP island property |
x-interact:submit | Handles form submission without a page reload |
x-interact:poll | Refreshes an island at a regular interval |
x-interact:ignore | Preserves an element and its contents during server updates |
Omitted values use native HTML meaning when available: x-interact:model.live uses the control's name, and x-interact:navigate uses the link's href. x-interact:poll without an expression synchronizes; x-interact:ignore takes no expression. Submission and event handlers, stream and persistence keys, and asset policies remain explicit. See model name inference.
$server provides island state, actions, and request feedback inside Alpine expressions. In @click="$server.call('save')", Alpine handles the event and Interact sends the PHP action request.
x-interact:navigatevisits ordinary CakePHP pages.x-interact:persistretains explicit layout regions between visits.x-interact:assetcontrols head asset reloads and persistent styles.
x-interact:stream declares display targets for incremental action output. x-interact:on:event handles named realtime and streamed events inside their owning island, with the application payload in $event.detail.