Textarea

Takes longer text, growing with its content up to a limit and then scrolling.

Refined portWildTextareaBase.vueForms/Textarea

Try it

Type in it. Past 90% of the limit, the counter turns amber.

0/120

Size

Error

Disabled

Max length

<WildTextareaBase
  v-model="notes"
  size="sm"
  :max-length="120"
/>

When to use

Use a textarea for free text that runs past one line, such as notes.
Set maxLength when the text has a hard limit, so people see the count before they reach it.

Don’t use it

For a single line, such as a name. Use Text input.

Sizes

sm is 140px tall with 12px text; lg is 200px with 13px. Both resize vertically only.

sm · 140px

lg · 200px

States

rest

hover

focus

default

error

disabled

Error outranks focus, so a field that’s both keeps its red edge and gains the focus ring outside it. Both draw a 2px edge inside the 1px border, so the text never moves.

Accessibility

It’s a native textarea, so typing and selection work as usual. Give it a name with ariaLabel. Error sets aria-invalid, and the counter is announced politely as it changes.

Key	What it does
Tab	Moves focus into the textarea, and out again.

Props

Prop	Type	Default	Description
modelValue	string	—	The text.
size	'sm' \| 'lg'	'sm'	140px or 200px tall.
maxLength	number	—	Adds a counter; it turns amber past 90%.
placeholder	string	—	A prompt shown while empty.
error	boolean	false	A 2px red edge; sets aria-invalid.
disabled	boolean	false	Greys the field and blocks typing.
ariaLabel	string	—	Accessible name.

Tokens

Token	Value	Where it lands
--radius-lg	8px	Corners, the same as every field.
--font-size-sm	12px	Text at sm.
--font-size-md	13px	Text at lg.
--global-neutral-grey-600	#DCDCDE	Border at rest, 1px.
--global-neutral-grey-800	#ADACB0	Border on hover.
--global-blue-1000	#1877F2	The 2px edge on focus, and the caret.
--global-red-800	#E12121	The 2px edge on error.
(no token)	0 0 0 3px, 12%	Halo on focus.
--global-neutral-grey-300	#F1F1F1	Ground when disabled.
--global-neutral-grey-1000	#4F4D55	Placeholder and counter.
--color-warning-active	#9D6508	Counter past 90%.