Atlas

Input

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

<x-atlas::input>

The input is deliberately thin. It renders a real <input>, adds Atlas styling, and forwards every attribute you give it — type, autocomplete, min, pattern, Alpine bindings, Livewire wire:model. Only invalid is its own. 

<x-atlas::input name="city" type="text" placeholder="Amsterdam" />
Preview follows the site's light/dark mode. Open standalone →

Types

Atlas styles every text-like type identically, so choose type for what it buys you on a phone rather than for how it looks: the right keyboard, a native date picker, password managers recognising the field, and the browser's own validation before your server ever sees the value.

Email Password Number of licences Renewal date Search 
<x-atlas::field>
    <x-atlas::label for="type-email">Email</x-atlas::label>
    <x-atlas::input id="type-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="type-password">Password</x-atlas::label>
    <x-atlas::input id="type-password" name="password" type="password" autocomplete="new-password" />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="type-number">Number of licences</x-atlas::label>
    <x-atlas::input id="type-number" name="licences" type="number" min="1" max="500" step="1" value="25" />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="type-date">Renewal date</x-atlas::label>
    <x-atlas::input id="type-date" name="renews_on" type="date" value="2027-01-31" />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="type-search">Search</x-atlas::label>
    <x-atlas::input id="type-search" name="q" type="search" placeholder="Search invoices" />
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →
type="number" is for quantities you would do arithmetic on. Postcodes, phone numbers and card numbers are digit strings, not numbers — use text or tel so leading zeroes survive and the spinner stays away.

Invalid

invalid is the only state Atlas adds: a danger-colored border plus aria-invalid="true". It says nothing about what went wrong, so always follow it with an error and connect the two with aria-describedby.

Invoice reference References look like 2026-0009. 
<x-atlas::field>
    <x-atlas::label for="invoice-reference" is-required>Invoice reference</x-atlas::label>
    <x-atlas::input
        id="invoice-reference"
        name="invoice_reference"
        type="text"
        value="2026/9"
        aria-describedby="invoice-reference-error"
        invalid
    />
    <x-atlas::error id="invoice-reference-error">References look like 2026-0009.</x-atlas::error>
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →

Disabled and read-only

Both are plain HTML attributes; Atlas only styles the disabled one. Reach for readonly when the value still matters on submit — a reference generated for the user — and disabled when the field is out of play entirely.

Billing contact Account number 
<x-atlas::field>
    <x-atlas::label for="state-disabled">Billing contact</x-atlas::label>
    <x-atlas::input id="state-disabled" name="billing_contact" type="text" placeholder="Set on the account" disabled />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="state-readonly">Account number</x-atlas::label>
    <x-atlas::input id="state-readonly" name="account_number" type="text" value="NL91ABNA0417164300" readonly />
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →

In a field

An input on its own is unlabelled. Wrap it in a field with a label, and point the input at that label with aria-labelledby — x-atlas::label is a custom element, so for alone does not connect them.

Website 
<x-atlas::field>
    <x-atlas::label id="site-url-label" for="site-url" is-required>Website</x-atlas::label>
    <x-atlas::input
        id="site-url"
        name="site_url"
        type="url"
        value="https://atlas.webreact.nl"
        aria-labelledby="site-url-label"
        autocomplete="url"
        required
    />
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →

Field

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

Label

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

Error

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

Textarea

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

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.

Toggle

A switch that turns something on or off immediately, implementing the full ARIA switch pattern in Alpine over a hidden checkbox.

Reference

<x-atlas::input>

  • Name
    invalid
    Type
    bool
    Default
    default: false
    Description
    Draws the danger border and sets <code>aria-invalid="true"</code>. Pair it with an <a href="/components/error">error</a>.