# Livewire Auto Form Events

> Handle browser events dispatched by Livewire Auto Form for UI feedback and custom logic. Use when this capability is needed.

- Skill: `tomevault-io/livewire-auto-form-events` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/livewire-auto-form-events`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/livewire-auto-form-events/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/livewire-auto-form-events

---


# Livewire Auto Form Events

## When to use this skill
Use this skill when you need to respond to actions within an `AutoForm` component, such as showing notifications after a save, handling auto-save updates, or confirming data loss when navigating away from a dirty form.

## Features
- **Real-time Feedback**: Listen for `saved` and `field-updated` to trigger UI notifications.
- **Context Aware**: Events include the relationship context and model ID for precise handling.
- **Dirty State Protection**: Respond to `confirm-discard-changes` to prevent accidental data loss.

## Available Events

### `saved`
Dispatched when the form (root or relation) is successfully persisted.
- **Parameters**: `context` (string), `id` (mixed)

### `field-updated`
Dispatched when a field is auto-saved.
- **Parameters**: `changed` (string), `context` (string), `id` (mixed)

### `confirm-discard-changes`
Dispatched when attempting to navigate away from an unsaved form buffer (when `autoSave` is false).

## Implementation Example

### Alpine.js Listener
```html
<div x-data="{ notification: '' }"
     x-on:saved.window="notification = 'Saved successfully!'"
     x-on:field-updated.window="notification = 'Field ' + $event.detail.changed + ' updated.'">
    
    <div x-show="notification" x-text="notification"></div>
    
    <!-- form content -->
</div>
```

### Livewire Listener
```php
use Livewire\Attributes\On;

class MyListener extends Component
{
    #[On('saved')]
    public function notify($context, $id)
    {
        session()->flash('message', "Record $id in context $context was saved.");
    }
}
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/schenke-io) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->