Error Message

#Overview

The Error component displays validation errors and custom error messages with a consistent design and proper accessibility features.

#Installation

Use the sheaf artisan command to install the error component easily:

php artisan sheaf:install error

#Basic Usage

<x-ui.error name="email" />

#Examples

#Laravel Validation Errors

Display validation errors for a specific field:

<x-ui.input name="email" type="email" />
<x-ui.error name="email" />

#Custom Error Messages

Display custom error messages:

<x-ui.error :messages="'Something went wrong'" />
<x-ui.error :messages="['Password too short', 'Must contain numbers']" />

#Combined Sources

Combine Laravel validation errors with custom messages:

<x-ui.error name="username" :messages="['Custom validation failed']" />

#Styling

Apply custom classes:

<x-ui.error name="phone" class="mb-4 p-3 bg-red-50 rounded-lg" />

#Integration with Forms

Works with form validation:

<form wire:submit="save">
    <x-ui.input name="title" label="Post Title" />
    <x-ui.error name="title" />
    
    <x-ui.textarea name="content" label="Content" />
    <x-ui.error name="content" />
    
    <x-ui.button type="submit">Save Post</x-ui.button>
</form>

#Props

#Styling Slots

The component includes data slots for targeted styling:

• data-slot="error" - The main error container
• data-slot="icon" - The exclamation icon (automatically styled red)

[data-slot="error"] {
    /* Custom error container styles */
}