Maskowlabs – Laravel Packages & Developer Tools

Basic Usage

The x-form-errors component displays validation errors from the Laravel $errors bag in a styled, animated error list. By default it listens to the general key and includes a shake animation on appearance.

It only renders when matching errors exist — if there are no errors, nothing is displayed.

The name field is required.
The email must be a valid email address.

1<x-form-errors bag="general" />

Sizes

Control the visual size of the error list with the size attribute. Available sizes are sm, md (default), and lg. Each size adjusts padding, font size, icon size, and spacing between items.

Small

The name field is required.
The email must be a valid email address.

Medium (default)

The name field is required.
The email must be a valid email address.

Large

The name field is required.
The email must be a valid email address.

1{{-- Small --}}
2<x-form-errors bag="general" size="sm" />
3 
4{{-- Medium (default) --}}
5<x-form-errors bag="general" size="md" />
6 
7{{-- Large --}}
8<x-form-errors bag="general" size="lg" />

Custom Icon

Override the default icon by passing any icon name to the icon attribute. The icon is displayed next to each error message.

The name field is required.
The email must be a valid email address.

1<x-form-errors bag="general" icon="x-circle--mini" />

Without Icon

To hide the icon entirely, pass :icon="false". The error messages are displayed without any icon prefix.

The name field is required.
The email must be a valid email address.

1<x-form-errors bag="general" :icon="false" />

Error Bags

The bag attribute determines which key in the $errors bag is displayed. Use different bag names to separate errors for different sections of your form. For example, you can use login and register bags for separate forms on the same page.

In Livewire you can add errors to a specific key using $this->addError('login', 'Invalid credentials.').

1{{-- Display errors from the "login" key --}}
2<x-form-errors bag="login" />
3 
4{{-- Display errors from the "register" key --}}
5<x-form-errors bag="register" />

Conditional Display

Use the showErrors attribute to programmatically control whether the error list is rendered. When set to false, the component will not display even if errors exist. This is useful when you want to toggle error visibility based on a state variable.

1{{-- Conditionally show/hide the error list --}}
2<x-form-errors bag="general" :showErrors="$showValidation" />

Livewire Integration

Place x-form-errors inside your Livewire form to automatically display validation errors. When using Livewire's built-in validation via $this->validate(), errors are added to the default error bag. Use $this->addError('general', '...') to add custom errors to the general bag.

Livewire Component

The corresponding Livewire component that handles validation and adds errors to the error bag.

 1class ContactForm extends Component
 2{
 3    public string $name = '';
 4    public string $email = '';
 5 
 6    public function save(): void
 7    {
 8        $this->validate([
 9            'name'  => ['required', 'string', 'max:255'],
10            'email' => ['required', 'email'],
11        ]);
12 
13        // If a custom error needs to be added:
14        $this->addError('general', 'Something went wrong.');
15    }
16 
17    public function render()
18    {
19        return view('livewire.contact-form');
20    }
21}

1<form wire:submit="save">
2    <x-input label="Name" wire:model="name" />
3    <x-input label="Email" wire:model="email" type="email" />
4 
5    <x-form-errors bag="general" />
6 
7    <x-button as="submit" type="primary">Save</x-button>
8</form>

Configuration

The default icon can be changed globally via the form-errors-icon key in config/basic-components.php. This value is used when no icon attribute is passed to the component.

1// config/basic-components.php
2 
3return [
4    // ...
5 
6    'form-errors-icon' => 'exclamation-triangle--mini',
7 
8    // ...
9];

All Attributes

Attribute	Default	Type	Description
`bag`	`"general"`	`string`	The key in the `$errors` bag whose messages are displayed.
`showErrors`	`true`	`bool`	Controls whether the error list is rendered. Set to `false` to hide errors programmatically.
`size`	`"md"`	`string`	The visual size of the error list. Accepts `sm`, `md`, or `lg`.
`icon`	`"exclamation-triangle--mini"`	`string\|false`	The icon displayed next to each error message. Pass `:icon="false"` to disable icons. Default is set via `config('basic-components.form-errors-icon')`.

Form Errors