Text input (TInput)

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

Playground:


Basic example

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

Props

PropertyTypeDefault value
value (v-model)[String, Number]undefined
idStringundefined
autocompleteStringundefined
autofocusBooleanundefined
disabledBooleanundefined
max[String, Number]undefined
maxlength[String, Number]undefined
min[String, Number]undefined
minlength[String, Number]undefined
multipleBooleanundefined
nameStringundefined
patternStringundefined
placeholderStringundefined
readonlyBooleanundefined
requiredBooleanundefined
tabindex[String, Number]undefined
typeString'text'
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 input)Emitted every time the value of the v-model change
changeString (The current value of the input)Emitted when the input is blurred and the value changed since the last time it has focus
focusFocusEventEmitted when the input is focused
blurFocusEventEmitted when the input is blurred
keyupKeyboardEventEmitted on the input keyup event
keydownKeyboardEventEmitted on the input 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.