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>Accept Character
You can filter what characters are allowed to be input using the prop accept. The value can be RegExp, or using available preset.
preview
vue
<template>
<p-textarea accept="0-9" placeholder="Numeric Only (Manual)" />
<p-textarea accept="numeric" placeholder="Numeric Only (using Preset)" />
</template>👉 See Available Preset for more information
Binding v-model
Textarea value can be binding with v-model.
preview
result:
-vue
<template>
<p-textarea v-model="result" />
</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 |
accept | String | - | Whitelist character can be inputted |
modelValue | String | - | v-model value |
Slots
| Name | Description |
|---|---|
| There no slots here | |
Events
| Name | Arguments | Description |
|---|---|---|
input | Native Input Object | Event when value inputted |