Skip to content
On this page

Textarea

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
preview
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

PropsTypeDefaultDescription
placeholderString-Input's placeholder
disabledBooleanfalseDisable state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state
autogrowBooleanfalseEnable auto-resize
resizeBooleanfalseEnable resize
show-counterBooleanfalseShow character counter
acceptString-Whitelist character can be inputted
modelValueString-v-model value

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
inputNative Input ObjectEvent when value inputted

See Also

Released under the MIT License.