wt-textarea.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
label		string	''	Textarea label
placeholder		string	undefined	Textarea placeholder
readonly		boolean	false	Native textarea readonly attribute
disabled		boolean	false	Native textarea disabled attribute
required		boolean	false	Marks textarea as required
name		string	''	Input id name for label association
rows		number	1	Number of rows in textarea
labelProps		Record	undefined	Object with props, passed down to wt-label as props
autoresize		boolean	false	Enables auto-resize. If passed, "Enter" key press emits "enter" event, new line is shift+enter
v		VuelidateFieldLike	undefined	Validation rules
customValidators		Array	() => []	Custom validators array

Events

Name	Params	Description
enter
paste
blur
keydown

Slots

Name	Scope	Description
label		Custom input label

Example Textarea

Textarea

Code

<template>
  <div>
    <wt-textarea
      v-model="value"
      label="Textarea"
      name="label-textarea"
      autoresize
    />
  </div>
</template>

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

const value = ref('');
</script>

Example Disabled Textarea

Disabled

disabled value

Code

<template>
  <wt-textarea
    :model-value="value"
    disabled
    label="Disabled"
    name="disabled-textarea"
  />
</template>

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

const value = ref('disabled value');
</script>

Example Invalid Textarea

Invalid textarea

invalid value

Code

<template>
  <wt-textarea
    v-model="value"
    :v="v$"
    label="Invalid textarea"
    name="invalid-textarea"
  />
</template>

<script setup>
import { useVuelidate } from '@vuelidate/core';
import { computed,ref } from 'vue';

const value = ref('invalid value');

const v$ = useVuelidate(
  computed(() => ({
    value: {
      required: () => false,
    },
  })),
  { value },
);

v$.value.$touch();
</script>