Textarea

Stable

Multi-line text input with auto-resize, character count, and error state. Pairs with Field for full label and error wiring.

Form elementInteractiveVhyxSeal

Interactive example

0/200

Auto-resize textarea with character counter

Import

tsx

import { Textarea } from '@vhyxui/react'

Variants

Default

0/280

Character count

Error state

Non-resizable

Sizes

sm, md, lg

States

Disabled

Read-only content

Read-only

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the textarea.
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'auto'`	`'vertical'`	Resize behavior. auto grows with content up to maxRows.
`minRows`	`number`	`3`	Minimum number of visible rows.
`maxRows`	`number`	—	Maximum rows before scroll activates (only when resize="auto").
`showCount`	`boolean`	`false`	Shows live character count. Pair with maxLength.
`error`	`boolean`	`false`	Applies error styling and sets aria-invalid.
`contract`	`Partial<ComponentContract>`	—	VhyxSeal contract override.
`className`	`string`	—	Additional CSS classes appended to the textarea wrapper.

Also accepts all standard HTMLTextAreaElement attributes.

Accessibility

Keyboard navigation

Key	Action
`Tab`	Move focus in/out of the textarea.
`Shift + Tab`	Move focus to the previous focusable element.
`Enter`	Insert a new line (standard browser behavior).

Agent contract

Default VhyxSeal contract shipped with every Textarea.

Default contract

{
  "type": "input",
  "intent": "enter-text",
  "description": "Accepts multi-line text content entered by the user",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "Updates the multi-line field value in the parent form context",
  "affects": [
    "form"
  ],
  "reversible": true,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_14abbf5e"
}

Theming

Override these CSS tokens to theme Textarea.

--vhyx-color-borderDefault border color

--vhyx-color-border-focusFocus border color

--vhyx-color-dangerError border color

--vhyx-color-surfaceTextarea background

--vhyx-radius-mdBorder radius

--vhyx-shadow-focusFocus ring

--vhyx-duration-fastBorder transition duration

Examples

Bio field with counter

0/160

160 character bio input

Inside a Field for full label + error wiring

tsx

<Field name="bio" label="Bio" hint="Max 160 characters">
  <Textarea
    {...form.register('bio')}
    showCount
    maxLength={160}
    resize="auto"
    error={!!form.formState.errors.bio}
  />
</Field>