Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Form matrix

Frozen progressive props (label, description, errorMessage) work the same across Slate form controls. Pair them with Livewire wire:model without wrapping markup by hand.

See also API freeze and Livewire.

Matrix
Control label description errorMessage Livewire
input ✓ ✓ ✓ wire:model
textarea ✓ ✓ ✓ wire:model
select ✓ ✓ ✓ wire:model
checkbox ✓ ✓ ✓ wire:model
switch ✓ ✓ ✓ wire:model
radio ✓ ✓ ✓ wire:model
radio-group ✓ ✓ ✓ wire:model on the group
file-input ✓ ✓ ✓ wire:model

Snippets

Input
example.blade.php 
<x-slate::input
    label="Email"
    type="email"
    wire:model="email"
    description="We will never share your email."
    errorMessage="Please enter a valid email address."
/>

Textarea
example.blade.php 
<x-slate::textarea
    label="Bio"
    wire:model="bio"
    description="A short introduction."
    errorMessage="Bio is required."
/>

Select
example.blade.php 
<x-slate::select
    label="Plan"
    wire:model="plan"
    description="You can change this later."
    errorMessage="Choose a plan."
>
    <option value="starter">Starter</option>
    <option value="pro">Pro</option>
</x-slate::select>

Checkbox
example.blade.php 
<x-slate::checkbox
    label="Product updates"
    wire:model="marketing"
    description="Occasional release notes."
    errorMessage="Confirm your preference."
/>

Switch
example.blade.php 
<x-slate::switch
    label="Airplane mode"
    wire:model="airplane"
    description="Disable radios while flying."
    errorMessage="Unable to save preference."
/>

Radio group
example.blade.php 
<x-slate::radio-group
    label="Notify me about"
    wire:model="notify"
    description="Choose one channel."
    errorMessage="Pick a notification channel."
>
    <x-slate::radio-group-item value="email" label="Email" />
    <x-slate::radio-group-item value="sms" label="SMS" />
</x-slate::radio-group>

File input
example.blade.php 
<x-slate::file-input
    label="Avatar"
    wire:model="avatar"
    description="PNG or JPG up to 2MB."
    errorMessage="Upload a valid image."
/>

Composition alternative

When you need custom layout, compose the field helpers yourself:

example.blade.php 
<x-slate::field name="email">
    <x-slate::field-label for="email">Email</x-slate::field-label>
    <x-slate::input id="email" type="email" wire:model="email" />
    <x-slate::field-description>We will never share your email.</x-slate::field-description>
    <x-slate::field-error name="email" />
</x-slate::field>

Sandbox

The consumer smoke page and local sandbox exercise progressive props with invalid/errorMessage states. Prefer those pages when verifying Livewire wiring end-to-end.

Last updated .