V2 is now our main version. V1 is considered EoL!

Powerful suite of Blade components for TALL Stack apps.

Errors

Errors component.

# Basic Usage

There are 2 validation errors:
  • The name field is required.
  • The description field is required.
<x-errors />

# Filtering Properties

An option to show validation errors for specific properties.

There are 1 validation errors:
  • The name field is required.
<x-errors only="name" />
 
<!-- use array for more than one -->
 
<x-errors :only="['name', 'description']" />

# Title Customization

Ops! There are 2 validation errors:
  • The name field is required.
  • The description field is required.
<x-errors title="Ops! There are :count validation errors:" />

# Close Option

An option to allow the user to hide the errors

There are 2 validation errors:
  • The name field is required.
  • The description field is required.
<x-errors close />

# Footer Slot

There are 2 validation errors:
  • The name field is required.
  • The description field is required.

Footer Slot 

<x-errors footer="Footer Slot" />
 
<!-- or -->
 
<x-errors>
    <x-slot:footer>
        <div class="flex justify-end">
            <p class="text-sm text-red-500">
                Footer Slot
            </p>
        </div>
    </x-slot:footer>
</x-errors>

# Color Variations

There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
There are 2 validation errors:
  • The name field is required.
  • The description field is required.
<!-- Default: red -->
 
<x-errors />
<x-errors color="primary" />
<x-errors color="secondary" />
<x-errors color="slate" />
<x-errors color="gray" />
<x-errors color="zinc" />
<x-errors color="neutral" />
<x-errors color="stone" />
<x-errors color="orange" />
<x-errors color="amber" />
<x-errors color="yellow" />
<x-errors color="lime" />
<x-errors color="green" />
<x-errors color="emerald" />
<x-errors color="teal" />
<x-errors color="cyan" />
<x-errors color="sky" />
<x-errors color="blue" />
<x-errors color="indigo" />
<x-errors color="violet" />
<x-errors color="purple" />
<x-errors color="fuchsia" />
<x-errors color="pink" />
<x-errors color="rose" />
<x-errors color="black" />
<x-errors color="white" />

# Events

There are 2 validation errors:
  • The name field is required.
  • The description field is required.
<x-errors close x-on:close="alert('Errors Closed')" />

Code highlighting provided by Torchlight