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

Textarea

A styled native <textarea> for longer freeform input. Pass label / description (or help) to compose field helpers automatically.

Usage

Short and clear works best.

example.blade.php 
<x-slate::textarea
    label="Bio"
    description="Short and clear works best."
    rows="4"
    placeholder="Tell us about yourself..."
/>

Control only

Skip the progressive props when you want the bare control for custom layouts.

example.blade.php 
<x-slate::textarea placeholder="Write a message..." rows="4" />

With field helpers

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

Short and clear works best.

example.blade.php 
<x-slate::field name="bio">
    <x-slate::field-label for="bio">Bio</x-slate::field-label>
    <x-slate::textarea id="bio" name="bio" rows="4" placeholder="Tell us about yourself..." />
    <x-slate::field-description>Short and clear works best.</x-slate::field-description>
</x-slate::field>

Rounded styles
example.blade.php 
<div class="space-y-3">
    <x-slate::textarea rows="3" rounded="sm" placeholder="Small radius" />
    <x-slate::textarea rows="3" rounded="lg" placeholder="Large radius" />
</div>

Invalid state
example.blade.php 
<x-slate::textarea aria-invalid="true" rows="3">This content has an error.</x-slate::textarea>

Props
Prop Type Default Description
name string — Input name (also via HTML attribute)
errorKey string — Override validation key for error wiring
rows int 4 Visible line count
rounded none, sm, md, lg, xl, full md Border radius
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 standard HTML attributes (disabled, required, wire:model, maxlength, etc.) pass through via $attributes.

Last updated .