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

Select

A styled native <select> with a built-in chevron and validation-aware states. Pass label / description (or help) to compose field helpers automatically.

Usage
example.blade.php 
<x-slate::select label="Role" placeholder="Select a role">
    <option value="designer">Designer</option>
    <option value="developer">Developer</option>
    <option value="founder">Founder</option>
</x-slate::select>

Placeholder
example.blade.php 
<x-slate::select placeholder="Select a role">
    <option value="designer">Designer</option>
    <option value="developer">Developer</option>
    <option value="founder">Founder</option>
</x-slate::select>

With field helpers

Prefer the prop API for typical forms. Compose manually when you need custom layout:

This helps personalize the docs experience.

example.blade.php 
<x-slate::field name="role">
    <x-slate::field-label for="role">Role</x-slate::field-label>
    <x-slate::select id="role" name="role" placeholder="Choose a role">
        <option value="designer">Designer</option>
        <option value="developer">Developer</option>
        <option value="founder">Founder</option>
    </x-slate::select>
    <x-slate::field-description>This helps personalize the docs experience.</x-slate::field-description>
</x-slate::field>

Invalid state
example.blade.php 
<x-slate::select aria-invalid="true">
    <option>Choose an option</option>
</x-slate::select>

Props
Prop Type Default Description
name string — Input name (also via HTML attribute)
errorKey string — Override validation key for error wiring
rounded none, sm, md, lg, xl, full md Border radius
placeholder string null Disabled placeholder option shown when no value is selected
label string — Compose a field-label automatically
description string — Compose a field-description automatically
help string — Alias for description (2.x compatibility)
errorMessage string — Compose a field-error with this message

All <option> elements are passed through the slot, and standard HTML attributes like disabled, required, and wire:model are supported.

Last updated .