Textarea (TTextarea)

VueJs reactive <textarea></textarea> component with configurable classes, variants, and most common events. Friendly with utility-first frameworks like TailwindCSS..

Playground:


Basic example

<t-textarea value="Hello world" name="my-textarea" />

Props

PropertyTypeDefault value
value (v-model)[String, Number]undefined
idStringundefined
autocompleteStringundefined
autofocusBooleanundefined
disabledBooleanundefined
maxlength[String, Number]undefined
minlength[String, Number]undefined
multipleBooleanundefined
nameStringundefined
patternStringundefined
placeholderStringundefined
readonlyBooleanundefined
requiredBooleanundefined
rowsStringundefined
colsStringundefined
tabindex[String, Number]undefined
typeString'text'
wrapString'soft'
classes[String, Object, Array]...
fixedClasses[String, Object, Array]undefined
variantsObjectundefined
variant[String, Object]undefined

Default value of the classes prop:

block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50  disabled:opacity-50 disabled:cursor-not-allowed

Events

EventArgumentsDescription
inputString (The current value of the textarea)Emitted every time the value of the v-model change
changeString (The current value of the textarea)Emitted when the textarea is blurred and the value changed since the last time it has focus
focusFocusEventEmitted when the textarea is focused
blurFocusEventEmitted when the textarea is blurred
keyupKeyboardEventEmitted on the textarea keyup event
keydownKeyboardEventEmitted on the textarea keydown event

Sign up for our newsletter

Stay up-to-date on news and updates about this project by email.

I will never spam or share your email under any circustance.