TuffNexus
|Docs
Components/Textarea

Textarea

Standalone multiline text field with count, resize, and status states.

VerifiedSince 1.0.0

Textarea

Basic Usage

Textarea

Loading demo...

Interaction Contract

  • v-model owns a string value and emits both update:modelValue and input on native input.
  • Wrapper class and style stay on the root; other attrs are forwarded to the inner <textarea>.
  • showCount displays the current length; when maxLength is present the format is current/max.
  • status only changes visual state. Put validation copy in the host form item.
  • focus() and blur() are exposed for form flows and editor shortcuts.

API

Props

PropTypeDefaultDescription
modelValue / v-modelstring''Textarea value.
placeholderstring''Placeholder text.
rowsnumber4Native textarea row count.
disabledbooleanfalseNative disabled state.
readonlybooleanfalseNative read-only state.
maxLengthnumber-Native maximum length and count denominator.
showCountbooleanfalseShow character count footer.
resize'none' | 'vertical' | 'horizontal' | 'both''vertical'CSS resize behavior.
status'default' | 'success' | 'error''default'Visual validation state.

Events

EventParamsDescription
update:modelValue(value: string)v-model update.
input(value: string)Mirrors value updates.
focus(event: FocusEvent)Native focus event.
blur(event: FocusEvent)Native blur event.

Exposed Methods

MethodDescription
focus()Focus the native textarea.
blur()Blur the native textarea.
textareaRefNative textarea ref.

Slots

TxTextarea does not expose slots. Keep labels, help text, counters beyond showCount, and validation messages in the surrounding form item.

Best Practices

  • Use maxLength with showCount for bounded notes, summaries, and prompts.
  • Keep resize="vertical" for normal forms; use none only when the surrounding layout already controls height.
  • Use status as a visual hint and keep accessible validation messages outside the component.
  • Forward id, name, and form-related attrs directly; the component passes them to the textarea.

Review Notes

  • Source: packages/tuffex/packages/components/src/textarea/src/TxTextarea.vue confirms attr forwarding, class / style placement, count formatting, resize classes, status classes, focus state, and exposed helpers.
  • Verified coverage: Coverage: packages/tuffex/packages/components/src/textarea/__tests__/textarea.test.ts covers value/placeholder/rows, attr forwarding, input / update:modelValue, count text, status/resize classes, and focus/blur helper exposure.
  • Export: packages/tuffex/packages/components/src/textarea/index.ts wraps the component with withInstall and exports TxTextareaInstance.

Source

查看源码
packages/tuffex/packages/components/src/textarea/index.ts