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.

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>

No `separator`

To avoid having the separator line above the actions slot, add no-separator attribute.

Name

<x-form wire:submit="save" no-separator>
    <x-input label="Name" wire:model="name" />
 
    <x-slot:actions>
        <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.

Custom error field

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

Address

Number

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

Magic word 1

Magic word 2

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

Full name

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

Age

E-mail

<x-form wire:submit="save6">
    {{-- Full error bag --}}
    {{-- All attributes are optional --}}
    <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>

Made with by Robson Tenório and contributors.