Textarea

A textarea component with label, error handling, hint support, and configurable rows.

Basic Usage

<x-wirekit::textarea label="Bio" name="bio" wire:model="bio" />

Custom Rows

<x-wirekit::textarea label="Description" name="description" rows="6" />

Disable Resize

<x-wirekit::textarea label="Comment" name="comment" :resize="false" />

Auto-size

Set rows="auto" to grow the textarea with its content as the user types — no JavaScript needed (it uses the CSS field-sizing: content feature, supported across the WireKit browser baseline). The numeric rows still acts as the minimum height. Auto-size grows the height only — the width follows the container, as in any real layout (here a fixed-width form column).

<x-wirekit::textarea style="width: 28rem; max-width: 100%" label="Notes" name="notes" rows="auto" placeholder="Type a few lines — the field grows to fit…" />

With Error

<x-wirekit::textarea
    label="Message"
    name="message"
    error="Message is required."
/>

Errors from Laravel's validation bag are shown automatically when name matches a field.

With Success

Confirm a valid field with a green border and an optional message — the mirror of the error state, but valid (no aria-invalid). error wins when both are set.

<x-wirekit::textarea label="Bio" name="bio" success="Saved" />

With Hint

<x-wirekit::textarea
    label="Bio"
    name="bio"
    hint="Maximum 500 characters."
    rows="4"
/>

Character Counter

Combine the textarea with Alpine.js to show a live character count with min/max validation:

<div x-data="{ text: '', max: 500, min: 10 }">
    <x-wirekit::textarea
        label="Bio"
        name="bio-counter"
        rows="4"
        x-model="text"
        maxlength="500"
        placeholder="Tell us about yourself..."
    />
    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.375rem; font-size: var(--text-wk-sm); gap: 0.5rem;">
        <div style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            <span x-cloak x-show="text.length > 0 && text.length < min" style="color: var(--color-wk-danger-text);">
                Minimum 10 characters required.
            </span>
            <span x-cloak x-show="text.length >= max" style="color: var(--color-wk-danger-text);">
                Character limit reached.
            </span>
        </div>
        <span style="color: var(--color-wk-text-muted); flex-shrink: 0; white-space: nowrap;" x-text="`${text.length}/${max}`">0/500</span>
    </div>
</div>

The counter is not part of the textarea component itself — it's a lightweight Alpine.js wrapper you add in your template. This gives you full control over the counter position, validation messages, and threshold logic.

Width

Like all WireKit form components, the textarea fills its container (w-full). Control the width via the parent element:

<x-wirekit::textarea label="Bio" name="bio-width-demo" rows="4" placeholder="Parent is max-w-md (28rem) — textarea fills it." />

See Input — Width for more layout examples (grid columns, mixed widths).

Optimistic UI

Pass the name of the Livewire method the field should call and the text is sent when you leave the field, shown as saving while it goes:

<x-wirekit::textarea
    name="bio"
    label="Bio"
    optimistic="saveBio"
>{{ $bio }}</x-wirekit::textarea>

Load wirekit-optimistic.js alongside whichever bundle you already use — below it, in your layout:

@wirekitScripts
<script src="{{ asset('vendor/wirekit/wirekit-optimistic.js') }}"></script>

Try it

The demo below runs the real path: the change shows immediately, the outline says it is provisional, and the server's answer either confirms it silently or takes it back.

{{-- In your app there is no host: your own Livewire component owns the method. --}}
<x-wirekit::textarea
    name="bio"
    label="Bio"
    optimistic="saveBio"
>{{ $bio }}</x-wirekit::textarea>

The <livewire:demos.…> wrapper above exists only on this site — it supplies the demo methods so the page can show a real round trip. The block under it is what you write.

A refusal does not take your text back, and that is the important part. Everywhere else in WireKit an optimistic update that fails puts the old value back — for a toggle or a select that costs you nothing, because the old value is simply the other choice. Here the old value belongs to the server and the new one is what you just wrote, so putting it back would delete your work because a save failed. No editor behaves that way, and neither does this.

Instead the text stays exactly where it is, and you are told two things: that it did not save, and that your text is still there. The second one is the question you actually have.

The field is not marked invalid. aria-invalid means this value is wrong, and a save that failed on the network says nothing about the value — it may be perfectly good and simply unsaved.

Props

Accessibility

The textarea component follows the same accessibility patterns as Input.

• Label pairing — When the label prop is set, a <x-wirekit::label> is rendered with for pointing to the textarea's id. The id is auto-generated from the name attribute.
• Error states — When an error is present, the textarea sets aria-invalid="true" and aria-describedby="{id}-error" to link the error message for screen readers.
• Hint text — When hint is set and no error is active, the hint is linked via aria-describedby="{id}-hint".
• :user-invalid styling — Native HTML5 constraints (required, minlength, maxlength) trigger a red border after user interaction, using :user-invalid (not :invalid).
• Character counter — When adding a character counter (see example above), ensure the counter text is perceivable. The Alpine.js pattern uses x-text which updates the DOM live — screen readers pick up changes naturally. For more explicit announcements, wrap the counter in an aria-live="polite" region.
• Disabled state — Uses the native disabled attribute with visual muting.
• Focus ring — Uses focus-visible for keyboard-only visibility.

Keyboard Interaction

Pitfalls

• Don't use textarea for code input. Reach for <x-wirekit::code-block> (read-only) or a real editor (Monaco / CodeMirror) — textarea has no syntax highlighting, no tab-indent, and no line-numbering.
• Don't bind wire:model.live for prose. Each keystroke round-trips. Use wire:model.blur.

Design Tokens

See Also

• Inline Edit — edit this value in place, with an explicit confirm step