Textarea

The textarea component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.

Examples

Textarea

The height of the Textarea Autosize component automatically adjusts as a response to keyboard inputs and window resizing events.

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTextarea } from '@point-hub/papp'

const form = ref({
  text: ''
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseTextarea" v-model="form.text" />
  </form>
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTextarea } from '@point-hub/papp'

const form = ref({
  text1: '',
  text2: ''
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseTextarea"
      label="Label"
      v-model="form.text1"
      layout="vertical"
      description="Vertical Layout"
    />
    <component
      :is="BaseTextarea"
      label="Label"
      v-model="form.text2"
      layout="horizontal"
      description="Horizontal Layout"
    />
  </form>
</template>

Border

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTextarea } from '@point-hub/papp'

const form = ref({
  text1: '',
  text2: '',
  text3: ''
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseTextarea"
      label="Without Border"
      v-model="form.text1"
      border="none"
    ></component>
    <component
      :is="BaseTextarea"
      label="Simple Border"
      v-model="form.text2"
      border="simple"
    ></component>
    <component
      :is="BaseTextarea"
      label="Full Border"
      v-model="form.text3"
      border="full"
    ></component>
  </form>
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTextarea } from '@point-hub/papp'

const form = ref({
  text1: '',
  text2: '',
  text3: '',
  text4: '',
  text5: ''
})

const errors = ref(['Error Example'])
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseTextarea" required label="Label" v-model="form.text1" />
    <component
      :is="BaseTextarea"
      placeholder="Placeholder Example"
      label="Label"
      v-model="form.text2"
    />
    <component
      :is="BaseTextarea"
      description="Description Example"
      label="Label"
      v-model="form.text3"
    />
    <component
      :is="BaseTextarea"
      :helpers="['Helper Example']"
      label="Label"
      v-model="form.text4"
    />
    <component :is="BaseTextarea" v-model:errors="errors" label="Label" v-model="form.text5" />
    <component
      :is="BaseTextarea"
      label="Label"
      v-model="form.text6"
      description="Disabled"
      disabled
    />
  </form>
</template>

Height

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTextarea } from '@point-hub/papp'

const form = ref({
  text1: '',
  text2: ''
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseTextarea"
      label="Min Height 128px"
      v-model="form.text1"
      border="full"
      :minHeight="128"
    />
    <component
      :is="BaseTextarea"
      label="Max Height 128px"
      v-model="form.text2"
      border="full"
      :maxHeight="128"
    />
  </form>
</template>

Textarea API

Types

export type BaseTextareaBorderType = 'simple' | 'full' | 'none'
export type BaseFormLayoutType = 'vertical' | 'horizontal'

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:errors	string[]		Textarea error message.
id	string		Textarea id.
label	string		Textarea label.
description	string		Textarea description.
placeholder	string		Textarea placeholder.
border	BaseTextareaBorderType		Textarea border.
layout	BaseFormLayoutType		Textarea layout.
maxlength	number		Textarea Max Length.
autofocus	boolean	false	Focus textarea on page load.
required	boolean	false	if true textarea is required.
disabled	boolean	false	if true textarea is disabled.
helpers	string[]		Textarea helper message.
minHeight	number		Textarea min height.
maxHeight	number		Textarea max height.