VueJs reactive <input /> component with configurable classes, variants, and most common events. Friendly with utility-first frameworks like TailwindCSS.
In this tab you can view and download or copy the settings to make your theme look like the demo . If you want to modify these settings use the customize tab.
Install within library
Only install this component
Install with old syntax
In this tab you can modify the TailwindCSS classes of the theme we create as example, you can also edit or delete as many variants as you wish. Once you finished you can preview your theme on the demo tab or grab the settings from the settings tab.
Fixed classes
Fixed classes shared by all the variants
Base classes
Classes used by default (when no variant is applied)
Classes
block w-full px-3 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed
Preview
Variants:
Variant classes
Classes used when the danger variant is applied
Classes
block w-full px-3 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed
Preview
Remove variant
Variant classes
Classes used when the success variant is applied
Classes
block w-full px-3 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed
Preview
Remove variant
Add variant
< t-inputvalue = " Hello world" name = " my-input" />
Property Type Default value value (v-model) [String, Number]undefinedid Stringundefinedautocomplete Stringundefinedautofocus Booleanundefineddisabled Booleanundefinedmax [String, Number]undefinedmaxlength [String, Number]undefinedmin [String, Number]undefinedminlength [String, Number]undefinedmultiple Booleanundefinedname Stringundefinedpattern Stringundefinedplaceholder Stringundefinedreadonly Booleanundefinedrequired Booleanundefinedtabindex [String, Number]undefinedtype String'text'classes [String, Object, Array]... fixedClasses [String, Object, Array]undefinedvariants Objectundefinedvariant [String, Object]undefined
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
Event Arguments Description input String (The current value of the input)Emitted every time the value of the v-model change change String (The current value of the input)Emitted when the input is blurred and the value changed since the last time it has focus focus FocusEventEmitted when the input is focused blur FocusEventEmitted when the input is blurred keyup KeyboardEventEmitted on the input keyup event keydown KeyboardEventEmitted on the input keydown event