BaseTextarea

The BaseTextarea component produces an unbranded <textarea> element. It provides the foundation for AisTextarea and can be used to build other custom controls. Its primary advantage over using a raw <textarea> is prop autocomplete.

Props

BaseTextarea supports the same attributes as described by AisTextarea. Any attribute on BaseTextarea will be included on the <textarea> element.

v-model

Use the v-model directive to bind to a textarea's value. v-model uses the modelValue prop under the covers. See Vue's documentation for details.

Disabled

<template>
  <div class="grid gap-4">
    <BaseTextarea
        v-model="sampleText"
        name="testarea"
        rows="10"
        placeholder="Base textarea"
        :disabled="disabled"
        :required="required"
        class="w-full block border border-ui-gray border-opacity-60 rounded shadow p-4"
    />

    <div class="flex gap-8">
      <label>
        <BaseCheckbox v-model="disabled" /> Disabled
      </label>
    </div>

    <div v-if="sampleText" class="border p-4 bg-ui-gray-50 rounded">
      {{sampleText}}
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { BaseTextarea } from '@ais-public/ais-components'
  import { BaseCheckbox } from '@ais-public/ais-components'

  const sampleText = ref('')
  const disabled = ref(false)
  const required = ref(false)

</script>

Events

@update:modelValue

BaseTextarea uses Vue's standard v-model configuration. As a result, it will fire the @update:modelValue event whenever the textarea's value changes. Typically, v-model should be preferred, but binding the event directly may be useful in special circumstances. See Vue's documentation for details.