Form
Basics
Once you submit a form you get for free:
- Validation errors based on
wire:model
. - Button spinner based on
target
action. - Auto unmask
money
inputs for nice validation.
<x-form wire:submit="save"> <x-input label="Name" wire:model="name" /> <x-input label="Amount" wire:model="amount" prefix="USD" money hint="It submits an unmasked value" /> <x-slot:actions> <x-button label="Cancel" /> <x-button label="Click me!" class="btn-primary" type="submit" spinner="save" /> </x-slot:actions></x-form>
Error bag
As you can see above, all validation errors are automatically displayed for each input. Additionally, you can display entire error bag or omit error handling for some inputs.
Currently, it does not work with multiple forms on same screen.
<x-form wire:submit="save2"> {{-- Full error bag --}} {{-- All attributes are optional, remove it and give a try--}} <x-errors title="Oops!" description="Please, fix them." icon="o-face-frown" /> <x-input label="Age" wire:model="age" /> {{-- Notice `omit-error`--}} <x-input label="E-mail" wire:model="email" hint="It will omit error here" omit-error /> <x-slot:actions> <x-button label="Click me!" class="btn-primary" type="submit" spinner="save2" /> </x-slot:actions></x-form>