Text Area

Display a text area element.

Usage

The CCTextArea component wraps a textarea element, the textarea element will inherit all attributes except class, where class is applied to the wrapper div.

      <script setup lang="ts">
const text = ref('')
</script>

<template>
  <CTextArea
    v-model="text"
    label="Example"
    placeholder="Type example text"
  />
</template>

Errors

The errors prop will take an array of strings and render them as errors.

  • Example error
      <template>
  <CTextArea :errors="[
  'Example error'
]" placeholder="Type example text" label="Example" />
</template>

Mono

Useful for technical examples. Will display text contents with a mono font.

      <template>
  <CTextArea mono placeholder="Type example text" label="Example" />
</template>

Disabled

      <template>
  <CTextArea disabled placeholder="Type example text" label="Example" />
</template>

Loading

      <template>
  <CTextArea loading placeholder="Type example text" label="Example" class="min-w-50" />
</template>

Readonly

      <template>
  <CTextArea readonly v-model="value" placeholder="Type example text" label="Example" />
</template>

Props

Prop Default Type
id string
label string
name string
autocomplete string
errors string[]
modelValueany
placeholder string
requiredboolean
disabledboolean
readonlyboolean
monoboolean
loadingboolean
variant'subtle' "outlined" | "subtle"
nowrapboolean