# Vue Form Text Component

> Vue textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.

## Example

```html
<template>
  <CFormTextarea
    id="exampleFormControlTextarea1"
    label="Example textarea"
    rows="3"
    text="Must be 8-20 words long."
  ></CFormTextarea>
</template>

<script setup>
import { CFormTextarea } from '@coreui/vue'
</script>
```
  
</Example>

If you need to add custom classs to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.

```vue
<CFormLabel for="exampleFormControlTextarea1">Example textarea</CFormLabel>
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
```

You can also use slots.

```vue
<CFormTextarea id="exampleFormControlTextarea1" rows="3">
  <template #label>Example textarea</template>
  <template #text>Must be 8-20 word long.</template>
</CFormTextarea>
```

## Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

```html
<template>
  <CFormTextarea
    class="mb-3"
    placeholder="Disabled textarea"
    aria-label="Disabled textarea example"
    disabled
  ></CFormTextarea>
</template>

<script setup>
import { CFormTextarea } from '@coreui/vue'
</script>
```
  
</Example>

## Readonly

Add the `readonly` boolean attribute on an textarea to prevent modification of the textarea's value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.

```html
<template>
  <CFormTextarea
    placeholder="Readonly textarea"
    aria-label="Readonly textarea example"
    disabled
    readonly
  ></CFormTextarea>
</template>

<script setup>
import { CFormTextarea } from '@coreui/vue'
</script>
```
  
</Example>