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

Field

field, field-label, field-description, and field-error help compose accessible form controls.

Usage

We'll only use this for account updates.

example.blade.php 
<x-slate::field name="email">
    <x-slate::field-label for="email">Email</x-slate::field-label>
    <x-slate::input id="email" name="email" type="email" placeholder="[email protected]" />
    <x-slate::field-description>We'll only use this for account updates.</x-slate::field-description>
    <x-slate::field-error name="email" />
</x-slate::field>

Invalid state

When the name matches a validation error key, the field sets data-invalid="true" so child helpers can react.

Please enter a valid email address.

example.blade.php 
<x-slate::field name="email" :invalid="true">
    <x-slate::field-label for="invalid-email">Email</x-slate::field-label>
    <x-slate::input id="invalid-email" name="email" aria-invalid="true" value="wrong" />
    <x-slate::field-error message="Please enter a valid email address." />
</x-slate::field>

Disabled field

This field is locked for your account.

example.blade.php 
<x-slate::field :disabled="true">
    <x-slate::field-label for="disabled-name">Display name</x-slate::field-label>
    <x-slate::input id="disabled-name" disabled value="Jane Doe" />
    <x-slate::field-description>This field is locked for your account.</x-slate::field-description>
</x-slate::field>

Props

x-slate::field
Prop Type Default Description
name string — Validation key used to infer invalid state
invalid bool null Force the invalid state
disabled bool false Adds data-disabled="true" for child styling

x-slate::field-error
Prop Type Default Description
name string — Validation key to read from the shared error bag
message string null Manual error message override

field-label and field-description are slot-only helpers that style text and inherit invalid / disabled state from the wrapping field.

Last updated .