PersonaTextarea
Base textarea form input
Usage
Simple Usage
preview
vue
<template>
<p-textarea />
</template>Placeholder
preview
vue
<template>
<p-textarea placeholder="Write something" />
</template>Disabled State
preview
vue
<template>
<p-textarea disabled />
</template>Readonly State
preview
vue
<template>
<p-textarea readonly />
</template>Error State
preview
vue
<template>
<p-textarea error />
</template>Resizeable
Enable resize button via prop resize
preview
vue
<template>
<p-textarea resize />
</template>Auto Grow
Auto adjust textarea based on text height.
preview
vue
<template>
<p-textarea rows="1" auto-grow />
</template>Counter
Show character counter with prop show-counter
0
0/50
vue
<template>
<p-textarea show-counter />
<p-textarea show-counter maxlength="50" />
</template>API
Props
| Props | Type | Default | Description |
|---|---|---|---|
placeholder | String | - | Input's placeholder |
disabled | Boolean | false | Disable state |
readonly | Boolean | false | Readonly state |
error | Boolean | false | Error state |
autogrow | Boolean | false | Enable auto-resize |
resize | Boolean | false | Enable resize |
show-counter | Boolean | false | Show character counter |
modelValue | String | - | v-model value |
Slots
| Name | Description |
|---|---|
| There no slots here | |
Events
| Name | Arguments | Description |
|---|---|---|
input | Native Input Object | Event when value inputted |