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.

Name

Amount

USD

It submits an unmasked value

<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.

Age

E-mail

It will omit error here

<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>

mary

Sponsor