PU-TextArea Component
A customizable textarea component with enhanced interaction features
Usage
Basic Usage
Prop | Type | Required | Default | Description |
---|---|---|---|---|
modelValue | string | number | null | Yes | - | Textarea value (v-model support) |
disabled | boolean | No | false | Disables the textarea |
placeholder | string | No | '' | Placeholder text |
id | string | No | undefined | Unique identifier for the textarea |
Event | Description | Payload |
---|---|---|
update:modelValue | Emits on input change, blur or Enter key | string | number | null |
blur | Triggers on field blur | Event |
keydown.enter | Triggers on Enter key press | KeyboardEvent |
- 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