maryUI

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