PU-TextArea Component

A customizable textarea component with enhanced interaction features

Usage

Basic Usage

PropTypeRequiredDefaultDescription
modelValuestring | number | nullYes-Textarea value (v-model support)
disabledbooleanNofalseDisables the textarea
placeholderstringNo''Placeholder text
idstringNoundefinedUnique identifier for the textarea
EventDescriptionPayload
update:modelValueEmits on input change, blur or Enter keystring | number | null
blurTriggers on field blurEvent
keydown.enterTriggers on Enter key pressKeyboardEvent
  • Base styling with Tailwind:
    .pu-textarea--default {
      @apply w-full p-2;
      @apply border-2 border-primary-light-500 rounded-lg;
      @apply text-gray-800 text-base;
      @apply focus:outline-none;
    }
    
  • Interactive states:
    .focus\:outline-none:focus {
      @apply ring-2 ring-primary-light-500;
    }
    
  • v-model support
  • Enter key handling
  • Blur event integration
  • Accessible disabled state
  • Customizable placeholder
  • Tailwind CSS for styling
  • Vue 3 Composition API
  • Optional PULabel component for labeled inputs