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 property, which is newer than the supported-browser floor, so WireKit applies it behind an @supports test: this is progressive enhancement, not something to assume. Where the property is unsupported the field keeps a two-row minimum and scrolls, and it stays resizable — nothing depends on the growing, but the growing is what the prop is named after, so reach for rows="auto" where a taller field is a nicety rather than a requirement. 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, also for a nested name such as items[0][qty], whose error Laravel stores as items.0.qty, and for a list such as tags[].

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

counter counts the characters in the field as the reader types, in the browser, with no request to the server. With a maxlength the count reads "120 / 500" and turns to the danger color past the limit; without one it is the number on its own.

<x-wirekit::textarea label="Meta description" name="meta-description" rows="3" counter maxlength="160" placeholder="Shown below the title in search results" />

A string instead of true is the sentence the counter shows. Its placeholders are :count, :max, :remaining, and it is also what a screen reader hears, so write it as a sentence:

<x-wirekit::textarea label="Bio" name="bio-counter" rows="4" counter=":count of :max characters" maxlength="500" />

The visible count is hidden from screen readers, which would otherwise read it out on every key. Once typing pauses, a polite live region says it in words: what is left of the limit, how far past it the text is, or the count itself.

It counts what maxlength counts in Chromium and Firefox, UTF-16 code units, so an emoji can count as two. With wire:model the field still sends nothing while the reader types, and a value the server sets shows its count once the server has answered. The counter runs under Alpine's CSP build. Input takes the same prop.

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') }}" defer></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

A readonly attribute reaches the textarea and paints the muted surface, the same treatment as input: the text stays legible and selectable and is submitted with the form, and the field does not look like one that takes typing.

Slots

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 neither an error nor a success message is active, the hint is linked via aria-describedby="{id}-hint". A success message takes the link instead ({id}-success), and an error takes it over both — only one description is linked at a time.
• :user-invalid styling — Native HTML5 constraints (required, minlength, maxlength) trigger a red border after user interaction, using :user-invalid (not :invalid).
• Character counter: the visible count of counter (see Character Counter) is hidden from screen readers, and a polite live region says the count in words once typing pauses: what is left of the limit, how far past it the text is, or the count itself, or the sentence you gave.
• 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