AisTextarea

AisTextarea provides a branded <textarea> component to match other AIS form inputs. It is built on top of BaseTextarea and will support all standard textarea attributes. AisTextarea is a block element and should typically be placed on a grid.

Props

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.

<template>
  <div class="grid gap-4">
    <AisTextarea
        placeholder="AIS textarea"
        v-model="sampleText"
        name="example"
        rows="3" 
        size="lg"
    />

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

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

  const sampleText = ref('')
</script>

name

name is required when the field will be submitted with a form.

placeholder

placeholder sets the text that appears when no value is set.

rows

rows sets the number of text rows to display. The default is 5.

Rows:

248

Example text area:

The quick brown fox jumps over the lazy dog.

<template>
  <div class="grid gap-8">
    <AisField label="Rows:">
      <AisSelect
          :options="[2, 4, 8]"
          v-model="selectedRows"
          size="sm"
      />
    </AisField>

    <AisField id="" label="Example text area:">
      <AisTextarea
        v-model="sampleText"
        :rows="selectedRows"
      />
    </AisField>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AisTextarea } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'
import { AisSelect } from '@ais-public/ais-components'

const selectedRows = ref(2)
const sampleText = ref('The quick brown fox jumps over the lazy dog.')
</script>

size

AisTextarea accepts the three standard form sizes, sm, md, and lg. Medium (md) is the default value.

Size:

smmdlgxl

Example text area:

The quick brown fox jumps over the lazy dog.

<template>
  <div class="grid gap-8">
    <AisField label="Size:">
      <AisSelect :options="sizes" v-model="selectedSize" size="sm" />
    </AisField>

    <AisField id="" label="Example text area:">
    <AisTextarea
        placeholder="Select a size..."
        model-value="The quick brown fox jumps over the lazy dog."
        :size="selectedSize" cols="40"
    />
    </AisField>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AisTextarea } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'
import { AisSelect } from '@ais-public/ais-components'

const sizes = ['sm', 'md', 'lg', 'xl']
const selectedSize = ref('md')
const sampleText = ref('')
</script>

required

Including the required prop will add the HTML required attribute. The prop will work in conjunction with AisField's required attribute.

disabled

Use the boolean disabled prop to disable an AisTextarea. You can use disabled by itself or :disabled="true".

The quick brown fox jumps over the lazy dog.

<template>
  <div class="grid gap-4">
    <AisTextarea
      v-model="sampleText"
      :rows="2"
      disabled
    />
  </div>
</template>

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

const text = 'The quick brown fox jumps over the lazy dog.'
const sampleText = ref(text)
</script>

invalid

Use the boolean invalid prop to mark an AisSelect as invalid. You can use invalid by itself or :invalid="true".

The quick brown fox jumps over the lazy dog.

<template>
  <div class="grid gap-4">
    <AisTextarea
        v-model="sampleText"
        :rows="2"
        invalid
    />
  </div>
</template>

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

const text = 'The quick brown fox jumps over the lazy dog.'
const sampleText = ref(text)
</script>

Events

@update:modelValue

AisTextarea 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.