VueTailwind

# Textarea

# Playground

Field status:
Field size:

Current value: 

Vuejs is awesome

^ Right?

Rendered class: 

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

# Events
 
Event Arguments Description
 
input String (The current value of the textarea) Emitted every time the value of the v-model change
 
change String (The current value of the textarea) Emitted when the textarea is blurred and the value was changed since it was focused
 
focus FocusEvent Emitted when the textarea is focused
 
blur FocusEvent Emitted when the textarea is blurred
 
keyup KeyboardEvent Emitted when on the textarea keyup event
 
keydown KeyboardEvent Emitted when on the textarea keydown event
 
# Props
 
Property Type Default value Accepted values
 
id String null Any valid type
 
autofocus Boolean false Any valid type
 
disabled Boolean false Any valid type
 
name String null Any valid type
 
readonly Boolean undefined Any valid type
 
required Boolean false Any valid type
 
tabindex String / Number null Any valid type
 
placeholder String null Any valid type
 
rows String  / Number null Any valid type
 
maxlength String / Number null Any valid type
 
status String / Boolean null true, false, 'success', 'error', 'warning'
 
size String null 'sm', 'lg'
  
Property Description
 
baseClass Base textarea class (never changes)
 
defaultStatusClass Classes when textarea doesnt has status and is not disabled
 
errorStatusClass Classes when textarea has status of false or "error"
 
successStatusClass Classes when textarea has status of true or "success"
 
warningStatusClass Classes when textarea has status of "warning"
 
disabledClass Classes when the textarea is disabled
 
defaultSizeClass Classes when the textarea has no defined size
 
largeSizeClass Classes when the textarea has the size defined as large (lg)
 
smallSizeClass Classes when the textarea has the size defined as small (sm)
 
# Default theme settings
 
const TTextarea = {
  baseClass: 'border block rounded',
  defaultStatusClass: 'bg-white',
  errorStatusClass: 'border-red-300 bg-red-100',
  warningStatusClass: 'border-yellow-400 bg-yellow-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 TTextarea

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

# The result:
 
 
 
 

      ←
       
        Select
      
      →