Textarea

Use bo-textarea for multi-line values with labels, helper text, validation, and optional resizing.

Usage

Message

<bo-textarea>
  v-model="message"
  label="Message"
  placeholder="Write a message..."
  :rows="4"
/>

States

Use description, hint, and error for field messaging. Set state="invalid" with an error.

DescriptionKeep it short.

Comment

Comment is required.

<div class="grid gap-3">
  <bo-textarea label="Description" description="Keep it short." />
  <bo-textarea label="Comment" state="invalid" error="Comment is required." />
</div>

Sizing

The default is four rows and non-resizable. Use rows, height, max-height, expand, and resizable as needed.

Notes

<bo-textarea label="Notes" :rows="3" resizable />

API

Prop / event	Type	Default	Description
id / dataTestId	string	autogenerated	Textarea attributes.
modelValue	string	''	Text used by v-model.
label / description / error / hint	string	-	Field messaging.
state	default | valid | invalid	default	Validation appearance.
variant	default | filled	default	Surface treatment.
placeholder / name	string	-	Empty hint and native form name.
rows / maxLength	number	4 / -	Visible rows and character limit.
resizable / expand / fullWidth	boolean	false	Sizing behavior.
height / maxHeight	number | string	-	CSS dimensions.
required / disabled / readOnly / autofocus	boolean	false	Native textarea states.
prefixIcon / suffixIcon	Icon	-	Icons around the textarea.
role / ariaLabel / ariaDescribedBy / ariaInvalid	native accessibility types	-	Textarea semantics.
update:modelValue	(value: string) event	-	Emitted when the text changes.
focus / blur / change	native component events	-	Emitted from the textarea.
focus	exposed method	-	Focuses the native textarea.