Textarea

An enhanced native <textarea>: auto height (capped or unlimited), character count, clearable, size tiers, variants and validation status.

Basic Usage

Basic usage

Example

Rows & Resize

rows / resize

Example

resize is passed through to the native resize value (none / both / horizontal / vertical), defaulting to none.

Auto Height

autosize

Example

autosize enables auto height: the height grows with content, returns to the minimum height when empty, and shows a scrollbar when exceeding max-rows (default 6).

Autosize Bounds

autosize + min-rows / max-rows

Example

min-rows (default 1) controls the minimum height, max-rows (default 6) caps the height and shows a scrollbar. The legacy attribute auto-height is kept for compatibility.

Unlimited Auto Height

autosize + max-rows=0

Example

max-rows="0" explicitly disables the cap: the height grows indefinitely with content and never shows a scrollbar (long-form writing, log pasting). Omitting max-rows keeps the default 6-row cap — unlimited growth must be set explicitly.

auto-height Compatibility Alias

auto-height

Example

auto-height is a compatibility alias for autosize with identical behavior: grows with content, returns to the minimum row height when empty, and shows a scrollbar beyond max-rows (default 6). Setting either one enables auto height.

Size Tiers

size

Example

size="small | medium | large" (default medium): font size, vertical padding and minimum height scale with the tier, aligned with the global control size tokens.

Variants

variant

Example

variant="outlined | filled | borderless" (default outlined). filled uses a gray background without a border, showing the border on focus; borderless has a transparent background and no border, keeping only the focus ring.

Validation Status

status

Example

status="error | warning | success": the border and focus ring change color with the validation result; error also sets aria-invalid on the inner textarea (perceivable by screen readers). When linked with oas-form-item validation, form-item writes aria-invalid on the host, visually identical to error.

Character Count

maxlength + show-count

Example

show-count displays a counter at the bottom-right outside the box: n/max when maxlength is set (majority convention, turns red when over; maxlength is passed through to the native attribute, truncating at the input layer), or just the current length when unset. The counter carries aria-live="polite" so screen readers announce count changes.

Clearable

clearable

This comment can be cleared and rewritten in one click.

Example

clearable shows a clear button at the top-right corner when there is a value (hidden when disabled / readonly): clicking clears the content, emits the oas-clear event, and returns focus to the textarea; under autosize the height shrinks back accordingly.

label Accessible Name

label

Example

label is written to the inner aria-label as the accessible name, with fallback order: label > placeholder > built-in default text. For a visible form label use the oas-form-item label channel (label layout belongs to form-item).

Native Attribute Passthrough

Native attribute passthrough

Example

Whitelisted attributes are passed through to the inner native <textarea>: name / autofocus / minlength / required / spellcheck / autocomplete / wrap. With native oas-form submission, name participates in form data and required / minlength in native constraint validation; wrap="hard" requires cols to submit hard line breaks.

Disabled & Readonly

disabled / readonly

Example

Events

Input and focus events

Example

• oas-input: on every keystroke, detail: { value }
• oas-focus / oas-blur: on focus / blur, detail: { value }
• oas-change: emitted on blur only when the value changed since focus (commit semantics), detail: { value }

Methods

focus() / blur() / select()

select()focus()blur()

Example

focus(options?) / blur() / select() all delegate to the inner native textarea.

Programmatic read/write of the current value goes through the public value property (like the native textarea.value): el.value reads the current text while the inner textarea is present, otherwise the value attribute snapshot; el.value = x writes the controlled value attribute and immediately syncs the inner control without dispatching events.

API

oas-textarea

Attributes

Attribute	Description	Type	Default
auto-height	Legacy name (alias of autosize)	boolean	—
autocomplete	Passed through to the inner native textarea	—	—
autofocus	Autofocus (native passthrough)	—	—
autosize	Auto height	boolean	—
clearable	Show a clear button (one-click clear; fires oas-clear + oas-input)	boolean	—
disabled	Disabled	boolean	—
label	Accessible name (aria-label channel; falls back to placeholder → locale)	—	—
max-rows	Maximum rows in autosize	string	—
maxlength	Maximum length (native passthrough; pair with show-count)	string	—
min-rows	Minimum rows in autosize	string	1
minlength	Minimum length (native passthrough)	—	—
name	Form field name (native passthrough)	—	—
placeholder	Placeholder text	string	—
readonly	Readonly	boolean	—
required	Required marker (native passthrough)	boolean	—
resize	Resize behavior	string	—
rows	Number of rows	string	3
show-count	Show character count (bottom-right n/max; turns red over limit; aria-live announced)	boolean	—
size	Size preset small / medium (default) / large	—	—
spellcheck	Spellcheck (native passthrough)	—	—
status	Validation status: error / warning / success; error mirrors aria-invalid on the inner textarea	string	—
value	Value (controlled)	string	—
variant	Variant: outlined (default) / filled / borderless	string	outlined
wrap	Wrap strategy (native passthrough: soft/hard)	—	—

Property (JS property; see each row for attribute reflection)

Property	Description	Type	Default
value	Current value: the inner textarea text (el.value reads; el.value = x writes the controlled value and syncs, no event)	string	—

Events

Event	Description
oas-blur	Fires on blur, detail: { value }
oas-change	Native change semantics: fires on blur when the value changed, detail: { value }
oas-clear	Fires when the clear button is clicked (oas-input also fires), detail: { originalEvent: new MouseEvent('click') }
oas-focus	Fires on focus, detail: { value }
oas-input	While typing, detail: { value }