WARNING! You are browsing the docs for an old version of TallStackUI. See the v4 docs.

Powerful suite of Blade components for TALL Stack apps.

Errors

Errors component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v4.

# 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:" />

# 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 />
If the user closes the error component and a new validation error subsequently occurs, the component will be displayed again with the new errors.

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

# 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')" />

Code highlighting provided by Torchlight