new
The real time chat demo: Ping →

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.
Make sure to add Currency library to make money input work.

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>

Custom error field

By default, it uses the model name to retrieve the validation errors. If you want to display validation errors for a custom error field, you can use the error-field attribute.


<x-form wire:submit="save4">
{{-- Notice `error_field` --}}
<x-input label="Custom error field" wire:model="salary" error-field="total_salary" />
 
<x-slot:actions>
<x-button label="Cancel" />
<x-button label="Click me!" class="btn-primary" type="submit" spinner="save4" />
</x-slot:actions>
</x-form>
$this->addError('total_salary', 'This is a custom error message for total salary field.');

Omit errors

If for some reason you want to omit the error message, you can use the omit-error attribute.

This is required, but we suppress the error message

<x-form wire:submit="save2">
<x-input label="Address" wire:model="address" />
 
{{-- Notice `omit-error` --}}
<x-input label="Number" wire:model="number" omit-error hint="This is required, but we suppress the error message" />
 
<x-slot:actions>
<x-button label="Cancel" />
<x-button label="Click me!" class="btn-primary" type="submit" spinner="save2" />
</x-slot:actions>
</x-form>

First message only

If you have multiple validation messages for the same filed and want to show only the first error message, you can use the first-error-only attribute.


<x-form wire:submit="save3">
<x-input label="Magic word 1" wire:model="magicWord1" />
 
{{-- Notice `first-error-only`--}}
<x-input label="Magic word 2" wire:model="magicWord2" first-error-only />
 
<x-slot:actions>
<x-button label="Cancel" />
<x-button label="Click me!" class="btn-primary" type="submit" spinner="save3" />
</x-slot:actions>
</x-form>
$this->validate([
'magicWord1' => 'starts_with:Hello|ends_with:world',
'magicWord2' => 'starts_with:Hello|ends_with:world',
]);

Custom error style

You can customize the error message style by using the error-class attribute.


<x-form wire:submit="save5">
{{-- Custom CSS class. Remeber to configure Tailwind safelist --}}
<x-input label="Full name" wire:model="full_name" error-class="bg-blue-500 p-1" />
 
<x-slot:actions>
<x-button label="Cancel" />
<x-button label="Click me!" class="btn-primary" type="submit" spinner="save5" />
</x-slot:actions>
</x-form>

Full error bag

As you can see above, all validation errors are automatically displayed for each input. Additionally, you can display entire error bag with x-errors component.

Currently, it does not work with multiple forms on same screen.

<x-form wire:submit="save6">
{{-- 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" />
<x-input label="E-mail" wire:model="email" />
 
<x-slot:actions>
<x-button label="Click me!" class="btn-primary" type="submit" spinner="save6" />
</x-slot:actions>
</x-form>

maryUI
Sponsor