OTextarea

OTextarea renders a labelled multiline text control with accessible guidance, validation feedback, and optional decoration.

Usage

Step by step

1. Import OTextarea from the ooko-ui/textarea public subpath.
2. Bind application state with v-model and provide the required label.
3. Add guidance, validation, and native textarea attributes directly on the component as needed.

Example

The rendered example and its source come from the same Vue single-file component.

Message *

Include the relevant context.

Interactive playground

Change the value, label, guidance, size, and textarea states. The preview updates immediately.

Example label

Helpful context appears here.

Size smmd Label Hint Error Disabled Read-only Required Hide label

Props

Prop	Type	Default	Description
size	OokoFormControlSize	"md"	Controls the textarea's form-control scale.
modelValue	string	undefined	Current controlled value of the textarea.
label	string	undefined	Visible or visually hidden accessible label.
id	string	undefined	Native textarea identifier. A hydration-safe identifier is generated when omitted.
name	string	undefined	Native form field name and OForm validation key.
hint	string	undefined	Persistent guidance displayed below the textarea.
error	string	undefined	Controlled validation error displayed below the textarea.
validation	OokoValidationBinding	undefined	Validation binding created by useOokoValidation.
hideLabel	boolean	false	Visually hides the label while preserving its accessible name.
required	boolean	false	Marks the native textarea as required.
disabled	boolean	false	Disables the native textarea.
readonly	boolean	false	Makes the native textarea read-only.
icon	Component	undefined	Vue component rendered as a decorative textarea icon.
iconPosition	OFieldIconPosition	"leading"	Places the icon before or after the textarea.

Events

Event	Payload	Description
update:modelValue	string	Emits the current string value after native input.

Slots

Slot	Props	Description
icon	none	Provides custom decorative icon markup and overrides the icon prop.

Related types

Type	Definition
OokoFormControlSize	type OokoFormControlSize = "sm" | "md";

CSS custom properties

Custom property	Default	Description
--o-textarea-gap	var(--o-space-1)	Sets the vertical space between field content.
--o-textarea-min-height	7.5rem	Sets the minimum editable area height.
--o-textarea-padding-inline	var(--o-space-3)	Sets the control shell inline padding.
--o-textarea-padding-block	var(--o-space-2)	Sets the control shell block padding.
--o-textarea-icon-gap	var(--o-space-2)	Sets the space between the icon and textarea.
--o-textarea-icon-size	1.25rem	Sets the decorative icon size.
--o-textarea-border	1px solid var(--o-border-color-control)	Sets the border while preserving state colors by default.
--o-textarea-border-radius	var(--o-radius-control)	Sets the control corner radius.
--o-textarea-focus-width	0.1875rem	Sets the focus outline width.
--o-textarea-focus-style	solid	Sets the focus outline style.
--o-textarea-focus-offset	0.125rem	Sets the distance between the control and focus outline.
--o-textarea-disabled-opacity	0.5	Sets the opacity of the complete disabled field.
--o-textarea-resize	vertical	Sets the native textarea resize behavior.

Override example

:root {
  --o-textarea-min-height: 10rem;
  --o-textarea-resize: both;
}

Accessibility

• The label is connected to the native textarea through matching for and id values.
• Hint, validation, and consumer-provided description identifiers are merged in aria-describedby.
• Invalid textareas expose aria-invalid="true"; feedback is visible text announced through a polite live region.
• Required, disabled, and read-only behavior uses native textarea attributes.
• Decorative icons are hidden from assistive technologies and never replace the label.
• Keyboard focus receives a visible shell outline, and forced-colors mode receives explicit state borders.
• Generated identifiers use Vue's hydration-safe useId() API through OField.

Behavior and edge cases

• OTextarea always emits a string and leaves trimming or normalization to the consumer.
• Native attributes and listeners such as rows, maxlength, placeholder, wrap, aria-*, @input, and @change are forwarded to the textarea.
• Consumer class and style attributes apply to the complete field root.
• Native constraints are first displayed on blur, then refreshed during correction and on OForm submission.
• Custom rules can be passed directly through validation or resolved from the nearest validation-enabled OForm by name. A direct binding takes precedence.
• The controlled error prop takes precedence over native validation and must be cleared by the parent. It also takes presentation precedence over custom results. Reset does not clear it.
• The icon slot overrides the icon prop. iconPosition has no visual effect without an icon.
• App defaults may configure size and iconPosition; the resolved size is propagated to the internal OField.