blatui

Components

Input

Displays a form input field or a component that looks like an input field.

php artisan blatui:add input 
<div class="w-full max-w-sm">
    <x-ui.input type="email" placeholder="Email" />
</div>

Branded

The color prop tints the focus ring + text selection.

<div class="flex max-w-sm flex-col gap-3">
    <x-ui.input color="#16a34a" placeholder="Emerald focus — click in" />
    <x-ui.input color="#db2777" type="email" placeholder="[email protected]" />
    <x-ui.textarea color="#7c3aed" placeholder="Violet focus ring…" rows="2" />
    <p class="text-muted-foreground text-xs">The <code>color</code> prop tints the focus ring + text selection.</p>
</div>

Disabled

<div class="w-full max-w-sm">
    <x-ui.input type="email" placeholder="Email" disabled />
</div>

File

<div class="grid w-full max-w-sm items-center gap-2">
    <x-ui.label for="picture">Picture</x-ui.label>
    <x-ui.input type="file" id="picture" />
</div>

Invalid

<div class="grid w-full max-w-sm items-center gap-2">
    <x-ui.label for="email-invalid">Email</x-ui.label>
    <x-ui.input type="email" id="email-invalid" value="not-an-email" aria-invalid="true" aria-describedby="email-invalid-hint" />
    <p id="email-invalid-hint" role="alert" class="text-destructive text-sm">Please enter a valid email address.</p>
</div>

Password

Mot de passe oublié ? 
{{-- Leading lock icon + built-in show/hide eye toggle (auto for type="password"). --}}
<div class="grid w-full max-w-sm gap-2">
    <div class="flex items-center justify-between">
        <x-ui.label for="input-password">Mot de passe</x-ui.label>
        <x-ui.link href="#" class="text-sm">Mot de passe oublié ?</x-ui.link>
    </div>
    <x-ui.input type="password" id="input-password" placeholder="••••••••" autocomplete="current-password">
        <x-slot:leading><x-lucide-lock /></x-slot:leading>
    </x-ui.input>
</div>

Readonly

{{-- Read-only inputs stay focusable and submit their value (unlike disabled). --}}
<div class="w-full max-w-sm">
    <x-ui.input type="email" value="[email protected]" readonly aria-label="Email" />
</div>

Sizes

<div class="flex w-full max-w-sm flex-col gap-3">
    <x-ui.input size="sm" placeholder="Small — h-8" />
    <x-ui.input placeholder="Default — h-9" />
    <x-ui.input size="lg" placeholder="Large — h-10" />
</div>

Types

<div class="grid w-full max-w-sm gap-4">
    <div class="grid gap-2">
        <x-ui.label for="input-number">Quantity</x-ui.label>
        <x-ui.input type="number" id="input-number" placeholder="0" min="0" />
    </div>
    <div class="grid gap-2">
        <x-ui.label for="input-date">Date</x-ui.label>
        <x-ui.input type="date" id="input-date" />
    </div>
    <div class="grid gap-2">
        <x-ui.label for="input-time">Time</x-ui.label>
        <x-ui.input type="time" id="input-time" />
    </div>
</div>

Utility Class

{{-- For a NATIVE-submit / nested form control, style a raw element with the foundations
     utility instead of a slot component. (Slot components such as x-ui.textarea / x-ui.select
     native can hit a Blade compile error when re-wrapped through another anonymous component's
     slot — a raw element + .blat-* utility sidesteps it entirely.) --}}
<input class="blat-input w-full max-w-sm" type="email" placeholder="[email protected]" />

With Button

<div class="flex w-full max-w-sm items-center gap-2">
    <x-ui.input type="email" placeholder="Email" />
    <x-ui.button variant="outline">Subscribe</x-ui.button>
</div>

With Icon

{{-- Prefix (leading) icon via the `leading` slot — the field auto-pads so text clears the icon. --}}
<div class="grid w-full max-w-sm gap-2">
    <x-ui.label for="input-email">Email</x-ui.label>
    <x-ui.input type="email" id="input-email" placeholder="[email protected]" autocomplete="email">
        <x-slot:leading><x-lucide-mail /></x-slot:leading>
    </x-ui.input>
</div>

With Label

<div class="grid w-full max-w-sm items-center gap-2">
    <x-ui.label for="email">Email</x-ui.label>
    <x-ui.input type="email" id="email" placeholder="Email" />
</div>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public string $email = '';

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.input type="email" wire:model="email" placeholder="[email protected]" />

API Reference

Props, slots and exposed methods for <x-ui.input>.

Props

Prop Type Default Description
type string 'text' The HTML input type (text, email, password, file, number, etc.). A password type gets a built-in show/hide toggle.
size string 'default' Height, padding and font size of the field.
sm default lg
toggle bool — Controls the show/hide eye button on password fields. Pass false to disable it; it is on by default for type="password".
color string — Any CSS color that brands the focus ring and text selection locally by overriding the ring/primary tokens.

Slots

Slot Description
leading Icon or content pinned inside the start edge of the field. The input is padded so text never sits under it.
trailing Icon or content pinned inside the end edge of the field. Ignored on password fields, which use that space for the eye toggle.