TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

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" />
 
<x-errors only="name,description" />
 
<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:" />

# Without Title

Hides the title and the divider line between the title and the errors.

  • The name field is required.
  • The description field is required.
<x-errors without-title />

# Numeric List

Displays the errors as a numbered list instead of bullet points.

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

# 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 />
After being dismissed, the error component reopens when new validation errors are added.

# 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>

# Footer Alignment

Use the end attribute on the footer slot to automatically align its content to the right.

There are 2 validation errors:
  • The name field is required.
  • The description field is required.
<x-errors>
    <x-slot:footer end>
        <x-button color="red" sm round>Fix now</x-button>
    </x-slot:footer>
</x-errors>

# Paddingless
NEW

An option to remove the padding of the separator of the header with the body.

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

# Shadowless & Bordered
NEW

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.
<x-errors shadowless />
<x-errors bordered />
<x-errors shadowless bordered />
<x-errors color="amber" shadowless bordered />

# 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.
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="mauve" />
<x-errors color="olive" />
<x-errors color="mist" />
<x-errors color="taupe" />
<x-errors color="black" />

# 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')" />
Event Detail Fired when
close — The errors box is closed

Code highlighting provided by Torchlight