VueTailwind

# Text input

# Playground

Field status:
Field size:

Current value: 

I love vuejs 😎

Rendered class: 

 
# Basic example
 
<t-input v-model="model" name="my-input"/>

# Events
 
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 was changed since it was focused
 
focus FocusEvent Emitted when the input is focused
 
blur FocusEvent Emitted when the input is blurred
 
keyup KeyboardEvent Emitted when on the input keyup event
 
keydown KeyboardEvent Emitted when on the input keydown event
 
# Props
 
Property Type Default value Accepted values
 
id String null Any valid type
 
autocomplete String null Any valid type
 
autofocus Boolean false Any valid type
 
disabled Boolean false Any valid type
 
max String / Number null Any valid type
 
maxlength String / Number null Any valid type
 
min String / Number null Any valid type
 
minlength String / Number null Any valid type
 
multiple Boolean false Any valid type
 
name String null Any valid type
 
pattern String null Any valid type
 
placeholder String null Any valid type
 
readonly Boolean undefined Any valid type
 
required Boolean false Any valid type
 
tabindex String / Number null Any valid type
 
type String 'text' Any valid type
 
status String / Boolean null true, false, 'success', 'error', 'warning'
 
size String null 'sm', 'lg'
  
Property Description
 
baseClass Base input class (never changes)
 
defaultStatusClass Classes when input doesnt has status and is not disabled
 
errorStatusClass Classes when input has status of false or "error"
 
successStatusClass Classes when input has status of true or "success"
 
warningStatusClass Classes when input has status of "warning"
 
disabledClass Classes when the input is disabled
 
defaultSizeClass Classes when the input has no defined size
 
largeSizeClass Classes when the input has the size defined as large (lg)
 
smallSizeClass Classes when the input has the size defined as small (sm)
 
# Default theme settings
 
const TInput = {
  baseClass: 'border block rounded',
  defaultStatusClass: 'bg-white',
  warningStatusClass: 'border-yellow-400 bg-yellow-100',
  errorStatusClass: 'border-red-300 bg-red-100',
  successStatusClass: 'border-green-300 bg-green-100',
  disabledClass: 'bg-gray-100 cursor-not-allowed opacity-75',
  defaultSizeClass: 'p-3',
  largeSizeClass: 'p-4 text-lg',
  smallSizeClass: 'p-2 text-sm',
}

export default TInput

  • Remember that in order to change the default settings you can change default theme or use the props:
 
<t-input
  base-class="border-2 block w-full rounded-lg shadow-inner bg-yellow-100 border-gray-3	00 focus:outline-none focus:shadow-outline"
/>

# The result:
 
 
 
 

      ←
       
        Textarea
      
      →