Textarea
A multi-line text input styled to match the hub-ui form controls. Use it for free-form content such as notes, descriptions, or messages. The value is two-way bindable via bind:value, and any extra attributes (rows, disabled, readonly, maxlength, name, id, aria-*) are forwarded to the underlying native <textarea>.
Default
Same field rules as Input — bg-field surface-field, resolved against whatever surface it sits on. rows gives it the height the content deserves.
<div class="w-80 space-y-3">
<Textarea placeholder="Type your message…" />
<Textarea rows={6} placeholder="Write a detailed description…" />
</div>Not editable
disabled takes the field out of the form and dims it; readonly keeps it submittable and selectable but not editable. Reach for readonly when the value still matters to the request.
<div class="w-80 space-y-3">
<Textarea value="This field cannot be edited." disabled />
<Textarea value="This value is displayed but not editable." readonly />
</div>Labelled field
Label above, helper text below, both in the same column as the field. Native maxlength is forwarded, so the cap is enforced by the browser rather than by a watcher.
Up to 120 characters.
<div class="w-80 space-y-2">
<label for="feedback" class="text-sm font-medium">Feedback</label>
<Textarea
id="feedback"
name="feedback"
rows={4}
maxlength={120}
placeholder="Share your thoughts…"
/>
<p class="text-muted text-xs">Up to 120 characters.</p>
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
value bindable | string | '' | The current text content. Two-way bindable via |
placeholder | string | '' | Placeholder text shown when the field is empty. |
class | string | Additional Tailwind classes merged onto the root | |
rows | number | Native attribute forwarded via | |
disabled | boolean | Native attribute forwarded via | |
readonly | boolean | Native attribute forwarded via | |
maxlength | number | Native attribute forwarded via |