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 model-value="Filler text example" placeholder="Type example text" label="Example" />
</template>
Props
name
string
placeholder
string
label
string
id
string
modelValue
any
errors
string[]
autocomplete
string
loading
boolean
required
boolean
disabled
boolean
readonly
boolean
mono
boolean