Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Textarea

Textarea with label, floating label variant, icon support, and Livewire validation feedback. Auto-resize is on by default: the height adjusts on every keystroke and whenever Livewire updates the bound value. The id attribute is auto-resolved from wire:model when omitted.

Basic usage

Any additional HTML attributes are forwarded directly to the <textarea> element. Add floating for a floating label layout and icon to place an icon inside the field.

Description

Message

<x-wirestrap::textarea
    wire:model="description"
    label="Description"
/>

{{-- Floating label with icon --}}
<x-wirestrap::textarea
    ...
    icon="bi-chat"
    floating
/>

Icon prop

The icon prop accepts any class string from your preferred icon library, or an array of attributes for full control. Custom icon components are also supported, see icon configuration.

Auto-resize

Auto-resize is enabled by default. Pass :rows to control the initial height. Disable with :autosize="false" for a fixed-height textarea.

Auto-resize (default)

Fixed height

{{-- Auto-resize on by default --}}
<x-wirestrap::textarea
    wire:model="body"
    label="Body"
/>

{{-- Fixed height --}}
<x-wirestrap::textarea
    ...
    :autosize="false"
    :rows="5"
/>

Disabled

Notes

<x-wirestrap::textarea ... disabled />

Validation

When wire:model is bound, the textarea checks $errors for a matching key and applies the invalid class and error message if found. Try submitting without filling in the field below.

Message

{{-- Suppress both the invalid class and the error message --}}
<x-wirestrap::textarea ... :has-validation="false" />

{{-- Keep the invalid class, hide the error message --}}
<x-wirestrap::textarea ... :has-validation-message="false" />

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::textarea

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Textarea id. Auto-resolved from wire:model when omitted.
`label`	`ComponentSlot\|string\|null`	`null`	Label text or slot content. No label element is rendered when null.
`floating`	`bool`	`false`	Use floating label layout. The placeholder is automatically set to a space character.
`icon`	`string\|array`	`null`	Icon identifier forwarded to the configured icon component.
`icon-placement`	`string`	`'start'`	Icon position: start or end.
`placeholder`	`string\|null`	`null`	Placeholder text. Defaults to a space in floating mode.
`rows`	`int\|null`	`config`	Initial row count.
`autosize`	`bool`	`config`	Auto-resize height to fit content. Also reacts to Livewire model updates.
`disabled`	`bool`	`false`	Disable the textarea.
`has-validation-message`	`bool`	`config`	Render the error message below the textarea.
`has-validation`	`bool`	`config`	Apply the invalid class when the wire:model key has an error.
`default-attributes`	`array`	`config`	Default HTML attributes merged onto the textarea element.
No results found

⭐ GitHub