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" variant="demo" />

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]'form-input'
fixedClasses[String, Object, Array]undefined
variantsObjectundefined
variant[String, Object]undefined

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 was changed since last time was focused
focusFocusEventEmitted when the input is focused
blurFocusEventEmitted when the input is blurred
keyupKeyboardEventEmitted when on the input keyup event
keydownKeyboardEventEmitted when on the input keydown event