Textarea
A multi-line text input for longer content.
Usage
<!-- Basic textarea -->
<textarea x-data="textarea()" x-bind="textareaAttrs" placeholder="Message"></textarea>
<!-- With label and description -->
<div x-data="field()" x-bind="fieldAttrs">
<label x-data="label()" x-bind="labelAttrs">Message</label>
<div x-data="fieldContent()" x-bind="fieldContentAttrs">
<textarea x-data="textarea()" x-bind="textareaAttrs" placeholder="Enter your message"></textarea>
<p x-data="fieldDescription()" x-bind="fieldDescriptionAttrs">Enter your message below.</p>
</div>
</div>
<!-- Disabled -->
<div x-data="field({ disabled: true })" x-bind="fieldAttrs">
<label x-data="label()" x-bind="labelAttrs">Message</label>
<textarea x-data="textarea({ state: 'disabled' })" x-bind="textareaAttrs" placeholder="Disabled"></textarea>
</div>Examples
Field
Use field(), fieldContent(), and fieldDescription() to build a textarea with a label and description.
Enter your message below.
Disabled
Use disabled: true on the field and state: 'disabled' on the textarea.
Invalid
Use invalid: true on the field and aria-invalid="true" on the textarea.
Please enter a valid message.
Button
Pair a textarea with a button to create a message form.