Atlas

Error

The message that explains why a control was rejected, with a warning icon in front of it.

<x-atlas::error>

An error is a short, danger-colored line that turns a red border into an explanation. Render it only when there is something to say — an empty error still draws its icon, so there is no "no errors" state to leave on the page.

Enter a postcode in the format 1015 CJ. 
<x-atlas::error>Enter a postcode in the format 1015 CJ.</x-atlas::error>
Preview follows the site's light/dark mode. Open standalone →
Write the fix, not the failure. "Enter a postcode in the format 1015 CJ" tells the reader what to type next; "Invalid postcode" makes them guess.

Icon

The light circle-exclamation is the default. Drop it with :icon="false" where a dense form would otherwise stack a column of identical symbols down the page, and the color plus the position already carry the meaning.

Default icon Heavier weight No icon at all 
<x-atlas::error>Default icon</x-atlas::error>
<x-atlas::error icon="fas-circle-exclamation">Heavier weight</x-atlas::error>
<x-atlas::error :icon="false">No icon at all</x-atlas::error>
Preview follows the site's light/dark mode. Open standalone →

In a field

The error goes last inside the field, after the control it explains. Give it an id and reference that from the control's aria-describedby, or the message is visible but unconnected — a screen reader will announce an invalid field and never say why.

IBAN A Dutch IBAN has 18 characters; this one has 14. 
<x-atlas::field>
    <x-atlas::label id="iban-label" for="iban" is-required>IBAN</x-atlas::label>
    <x-atlas::input
        id="iban"
        name="iban"
        type="text"
        value="NL91 ABNA 0417"
        aria-labelledby="iban-label"
        aria-describedby="iban-error"
        invalid
    />
    <x-atlas::error id="iban-error">A Dutch IBAN has 18 characters; this one has 14.</x-atlas::error>
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →

Announcing a late error

aria-describedby is read when the control takes focus, which is enough for errors already on the page at load. An error that appears afterwards — a Livewire validation round trip, an async coupon check — also needs role="alert" so it is announced the moment it arrives.

Coupon code That coupon expired on 31 August. 
<x-atlas::field>
    <x-atlas::label id="coupon-label" for="coupon">Coupon code</x-atlas::label>
    <x-atlas::input
        id="coupon"
        name="coupon"
        type="text"
        value="SUMMER25"
        aria-labelledby="coupon-label"
        aria-describedby="coupon-error"
        invalid
    />
    <x-atlas::error id="coupon-error" role="alert">That coupon expired on 31 August.</x-atlas::error>
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →
The template checks the slot before rendering the message wrapper, but a Blade slot object is always truthy, so <x-atlas::error /> renders an icon and an empty span rather than nothing. Guard the component from the outside instead of relying on an empty slot.

Field

The wrapper that binds a label, a control and an error message into one form row.

Input

A single-line text control, styled for every input type the browser offers.

Textarea

A multi-line text control that shares the input styling, with a resize handle you can lock down.

Label

The name of a form control, with an optional required marker.

Select

A native select styled with Atlas input tokens, with a disabled placeholder option built in.

Checkbox

A checkbox with a styled indicator, an optional description and a card-like grouped layout.

Radio

A native radio button with a styled indicator, plus a group wrapper for the set it belongs to.

Fieldset

A vertical stack that gathers related fields into one group.

Reference

<x-atlas::error>

  • Name
    icon
    Type
    string | false
    Default
    default: atlas-circle-exclamation-light-full
    Description
    Icon rendered before the message. Pass <code>false</code> or <code>null</code> to drop it.

Slots

  • Name
    default
    Type
    slot
    Description
    The message. One sentence, saying what to do about it.