Textarea

<oblyx-textarea> renders a real, labeled multi-line <textarea> that participates in native HTML form submission and constraint validation with zero consumer JavaScript, mirroring <oblyx-input>'s approach. There is deliberately no wrapper field element:label, help and error are plain attributes directly on the control.

Basic textarea

HTML

Kotlin

<oblyx-textarea label="Bio" placeholder="Tell us about yourself"></oblyx-textarea>

oblyxTextarea(label = "Bio", placeholder = "Tell us about yourself")

Rows

rows sets the initial visible height, forwarded verbatim to the native <textarea>. There is no auto-resize: the native resize: vertical handle lets a reader grow it further. @default 3.

Textarea rows

HTML

Kotlin

<oblyx-textarea label="Short note" rows="2"></oblyx-textarea>
<oblyx-textarea label="Long note" rows="6"></oblyx-textarea>

oblyxTextarea(label = "Short note", rows = 2)
oblyxTextarea(label = "Long note", rows = 6)

Sizes

size is an internal padding scale, not a height control: height comes from rows instead. sm and md resolve identically; only lg adds extra padding.

Textarea sizes

HTML

Kotlin

<oblyx-textarea label="Small" size="sm"></oblyx-textarea>
<oblyx-textarea label="Medium" size="md"></oblyx-textarea>
<oblyx-textarea label="Large" size="lg"></oblyx-textarea>

oblyxTextarea(label = "Small", size = OblyxTextareaSize.SM)
oblyxTextarea(label = "Medium", size = OblyxTextareaSize.MD)
oblyxTextarea(label = "Large", size = OblyxTextareaSize.LG)

Help text

Textarea with help text

HTML

Kotlin

<oblyx-textarea label="Feedback" help="Markdown is not supported."></oblyx-textarea>

oblyxTextarea(label = "Feedback", help = "Markdown is not supported.")

Disabled and readonly

Disabled

HTML

Kotlin

<oblyx-textarea label="Bio" value="Locked while your account is under review." disabled></oblyx-textarea>

oblyxTextarea(label = "Bio", value = "Locked while your account is under review.", disabled = true)

Readonly

HTML

Kotlin

<oblyx-textarea label="Original message" value="This part of the thread cannot be edited." readonly></oblyx-textarea>

oblyxTextarea(label = "Original message", value = "This part of the thread cannot be edited.", readonly = true)

Error

Setting error puts the textarea in its error visual state and sets aria-invalid="true". This is purely informational: it does not call setCustomValidity and does not block submission on its own.

Textarea with error

HTML

Kotlin

<oblyx-textarea label="Bio" value="x" error="Bio must be at least 10 characters."></oblyx-textarea>

oblyxTextarea(label = "Bio", value = "x", error = "Bio must be at least 10 characters.")

Form submission and validation

name is what makes the value appear in FormData under that key. required,minlength and maxlength are forwarded to the native textarea, so the browser's own constraint validation blocks submission and reports validity. There is no pattern attribute here: unlike <input>, a native <textarea> has none to forward.

Textarea inside a form

Submits and reads the value back out of FormData. Try fewer than 10 characters to see native validation block it.

HTML

Kotlin

<form onsubmit="event.preventDefault(); const data = new FormData(this); this.querySelector('output').textContent = 'Submitted bio: ' + data.get('bio');">
  <oblyx-textarea label="Bio" name="bio" required minlength="10"></oblyx-textarea>
  <button type="submit">Save</button>
  <output></output>
</form>

form {
  oblyxTextarea(label = "Bio", name = "bio", required = true, minlength = "10")
  button(type = ButtonType.submit) { +"Save" }
}

Reference

`<oblyx-textarea>`

Attribute	Type	Default	Description
`label`	`string \| undefined`	–	Label text, always rendered and always associated with the textarea via a real `<label for>`. Required for an accessible name; omitting it is a defect and is flagged loudly rather than silently producing an unlabeled control.
`help`	`string \| undefined`	–	Help text, rendered between the label and the textarea box and wired into `aria-describedby`.
`error`	`string \| undefined`	–	Error message. Presence alone, independent of `error` being non-empty text, puts the textarea in its error visual state and sets `aria-invalid="true"`. When non-empty, also renders the message wired into `aria-describedby`. Purely informational: this does not call `setCustomValidity`.
`size`	`smmdlg`	`md`	Internal padding scale.
`name`	`string \| undefined`	–	Forwarded verbatim to the native `<textarea name>`. This is what makes the value appear in FormData/`receiveParameters()`.
`value`	`string \| undefined`	–	Initial value only, rendered as the native `<textarea>`'s child text content, never as its `.value` IDL property, so it never clobbers what the user has typed on a later re-render.
`placeholder`	`string \| undefined`	–	Forwarded verbatim to the native `<textarea placeholder>`.
`rows`	`number`	`3`	Forwarded verbatim to the native `<textarea rows>`. Controls initial height; the user can still grow it further via native `resize: vertical`.
`required`	`boolean`	`false`	Forwarded to native `required`, enforcing real constraint validation.
`minlength`	`string \| undefined`	–	Forwarded verbatim to native `<textarea minlength>`. Enforces real constraint validation, matching `required`/`maxlength`.
`maxlength`	`string \| undefined`	–	Forwarded verbatim to native `<textarea maxlength>`. Enforces real constraint validation, matching `required`/`minlength`.
`disabled`	`boolean`	`false`	Native disabled state, forwarded verbatim to the inner `<textarea>`.
`readonly`	`boolean`	`false`	Native readonly state, forwarded verbatim to the inner `<textarea>`.