Wire

UI
Errors

The errors component offers a versatile solution for handling and presenting errors within your application. It allows you to customize default error messages stored in language translation files, rendering errors returned by forms with ease, and even filtering these errors using either an array or a string separated by slashes. Furthermore, you have the power to adjust the component's header title and, similar to the alert component, modify or remove the associated icon as necessary. Additionally, you can assign a footer slot to enhance its functionality. In summary, the errors component is a flexible tool for managing and presenting errors in a way that suits your specific needs and preferences.

Information!
You have the option to personalize the default error messages found within the language translation files.
Errors Simple

An effortless approach to utilizing the errors component involves rendering all errors that the form returns.

There were 4 errors in your submission
  • The name field is required
  • You must inform a valid email
  • This address is invalid
  • The phone field is required
1<x-errors />
Errors Filtered

The errors component provides the flexibility to filter the errors returned by the form. You can specify this filter by using either an array or a string separated by slashes.

There were 2 errors in your submission
  • The name field is required
  • You must inform a valid email
There were 2 errors in your submission
  • This address is invalid
  • The phone field is required
1<x-errors only="name|email" />
2 
3<x-errors :only="['address', 'phone']" />
Errors Title

You also possess the capability to modify the title that will be displayed in the header of the errors component.

Attention!
The key {errors} will be replaced with the number of error messages. But this replacement does not work if you use the title slot.
We found 4 validation error(s)
  • The name field is required
  • You must inform a valid email
  • This address is invalid
  • The phone field is required
1<x-errors title="We found {errors} validation error(s)" />
Errors Icons

Similar to the alert component, you have the flexibility to alter the icon or remove it as needed.

There was an error in your submission
  • The name field is required
There was an error in your submission
  • You must inform a valid email
1<x-errors only="name" iconless />
2 
3<x-errors only="email" icon="shield-exclamation" />
Errors Footer

Additionally, drawing inspiration from the alert component, you can designate a footer slot.

There were 4 errors in your submission
  • The name field is required
  • You must inform a valid email
  • This address is invalid
  • The phone field is required
1<x-errors>
2    <x-slot name="footer" class="flex items-center justify-end">
3        <x-button sm label="Close" flat negative />
4    </x-slot>
5</x-errors>
Errors API
Attention!
The Errors component receives all options from Alert Component .
Prop Type Default Required
only array [] false
title string trans('wireui::messages.errors.title') false