OcTextarea component

Description

OcTextareas allow users to provide text input. Commonly used when the expected input is long. For short input, use the OcTextInput component.

Accessibility

The label is required and represents the name of the textarea.

The description-message can be used additionally to give further information about the textarea. When a description is given, it will be referenced via the aria-describedby property automatically. An error or warning will replace the description as well as the aria-describedby property until the error or warning is fixed.

Examples

Default

The default and most simple use case involves a v-model and a label.

<template>
  <oc-textarea v-model="text" label="Lorem?" />

  <p>Value: {{ text }}</p>
</template>

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

const text = ref<string>('Ipsum!')
</script>

Disabled

<oc-textarea disabled label="Disabled" model-value="I am disabled" />

Messages

<template>
  <oc-textarea
    label="Textarea with description message below"
    class="mb-2"
    description-message="This is a description message."
    :fix-message-line="true"
  />
  <oc-textarea
    v-model="valueForMessages"
    label="Textarea with error message with reserved space below"
    class="mb-2"
    :error-message="errorMessage"
    :fix-message-line="true"
  />
  <oc-textarea
    v-model="valueForMessages"
    label="Textarea with error message without reserved space below"
    class="mb-2"
    :error-message="errorMessage"
  />
</template>

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

const valueForMessages = ref<string>('')

const errorMessage = computed(() => {
  return unref(valueForMessages).length === 0 ? 'Value is required.' : ''
})
</script>

Properties

Emits

Slots