Textarea

Base textarea form input

Usage

Simple Usage

preview

<template>
  <p-textarea />
</template>

Placeholder

preview

<template>
  <p-textarea placeholder="Write something" />
</template>

Disabled State

preview

<template>
  <p-textarea disabled />
</template>

Readonly State

preview

<template>
  <p-textarea readonly />
</template>

Error State

preview

<template>
  <p-textarea error />
</template>

Resizeable

Enable resize button via prop resize

preview

<template>
  <p-textarea resize />
</template>

Auto Grow

Auto adjust textarea based on text height.

preview

<template>
  <p-textarea rows="1" auto-grow />
</template>

Counter

Show character counter with prop show-counter

0

0/50

preview

<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

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

-

<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

See Also

• Input