Textarea

Provides a multi-line input field for users to enter longer text. Textareas should always be paired with a label to clearly communicate the expected content and ensure accessibility.

Usage

Use textareas for capturing extended input, such as comments, descriptions, or messages. The label should be descriptive. Provide optional hints or validation to guide proper entry. Avoid leaving textareas unlabeled, as this can confuse users and reduce accessibility.

API Reference

Component attribute(s)

x-h-textarea

Modifiers

Modifier	Description
group	Used when the textarea is inside an input group

Validation timing

By default this control shows native-constraint errors (for example required) only after the user interacts with it or attempts to submit, not on page load. To validate on load instead, set data-validate="immediate" on a wrapping x-h-fieldset, x-h-field, or any ancestor element. Setting aria-invalid="true" yourself always shows the error immediately. See Fieldset for details.

Data Slots

Slot	Element
textarea	x-h-textarea
input-group-control	x-h-textarea.group

Examples

<textarea x-h-textarea placeholder="Comment..."></textarea>

Without resize handle

<textarea x-h-textarea class="resize-none"></textarea>

Invalid

<textarea x-h-textarea aria-invalid="true">Invalid text</textarea>

Disabled

<textarea x-h-textarea disabled>Disabled text</textarea>

Read-only

<textarea x-h-textarea readonly>Read-only text</textarea>