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

Form

A lightweight form layout wrapper with built-in gap spacing. Pair with form-item for grouped fields.

Usage
example.blade.php 
<x-slate::form>
    <x-slate::form-item>
        <x-slate::input label="Name" placeholder="Ada Lovelace" />
    </x-slate::form-item>
    <x-slate::form-item>
        <x-slate::input label="Email" type="email" placeholder="[email protected]" />
    </x-slate::form-item>
    <x-slate::button type="submit">Submit</x-slate::button>
</x-slate::form>

With validation states

Progressive errorMessage props work the same inside form items.

Enter a valid email address.

Optional. Shown on your public profile.

example.blade.php 
<x-slate::form>
    <x-slate::form-item>
        <x-slate::input
            label="Email"
            type="email"
            value="not-an-email"
            error-message="Enter a valid email address."
        />
    </x-slate::form-item>
    <x-slate::form-item>
        <x-slate::textarea
            label="Bio"
            rows="3"
            description="Optional. Shown on your public profile."
        />
    </x-slate::form-item>
    <div class="flex justify-end gap-2">
        <x-slate::button type="button" variant="outline">Cancel</x-slate::button>
        <x-slate::button type="submit">Save</x-slate::button>
    </div>
</x-slate::form>

Composition
code 
Form
└── FormItem (repeat)
    └── Field controls

See the form validation block for a fuller card pattern.

Last updated .