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

Label

Code

<script setup lang="ts">
import { ref } from 'vue'

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

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

Border

Code

<script setup lang="ts">
import { ref } from 'vue'

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

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

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'

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

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

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

Height

Code

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <form @submit.prevent="">
    <base-textarea label="Min Height 128px" v-model="form.text1" border="full" :minHeight="128" />
    <base-textarea 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.
data-testid	string		Testing ID.

Automated Test Guide

If you pass a data-testid to the <base-textarea> component, it will automatically generate unique data-testid attributes for testing.

Gherkin Scenario

When I type "I need to upload a document file here." into "notes"

Step Definition

When('I type {string} into {string}', (value: string, selector: string) => {
  cy.get(`[data-testid="${selector}"]`).type(value)
})

Code Implementation

<script setup>
import { ref } from 'vue'

const notes = ref()
</script>

<template>
  <base-textarea v-model="notes" data-testid="notes" />
</template>